mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
fix(curriculum): correct editable regions workshop-colored-markers (#65339)
Co-authored-by: majestic-owl448 <26656284+majestic-owl448@users.noreply.github.com>
This commit is contained in:
hbar1st
+3
-2
@@ -63,9 +63,10 @@ assert.strictEqual(h1?.textContent?.trim(), 'CSS Color Markers');
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+3
-2
@@ -54,13 +54,14 @@ assert.match(code, linkElementRegex);
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colored Markers</title>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
</body>
|
||||
|
||||
+3
-2
@@ -56,11 +56,12 @@ assert.isTrue(document.querySelector('div')?.classList?.contains('container'));
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
+3
-2
@@ -50,13 +50,14 @@ containerChildren.forEach(child => assert.isTrue(child.classList?.contains('mark
|
||||
<title>Colored Markers</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
+3
-2
@@ -53,10 +53,11 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.marker {
|
||||
background-color: red;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
+3
-2
@@ -49,12 +49,13 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
background-color: red;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
+3
-2
@@ -68,12 +68,13 @@ containerChildren.forEach(child => assert.isTrue(child?.classList?.contains('mar
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
--fcc-editable-region--
|
||||
<div class="container">
|
||||
<div class="marker">
|
||||
</div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
+3
-3
@@ -53,13 +53,13 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
background-color: red;
|
||||
margin: auto;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
margin: auto;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
+5
-5
@@ -53,12 +53,12 @@ assert.isTrue(containerFirstChild?.classList?.contains('one'));
|
||||
<div class="container">
|
||||
--fcc-editable-region--
|
||||
<div class="marker">
|
||||
</div>
|
||||
<div class="marker">
|
||||
</div>
|
||||
<div class="marker">
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div class="marker">
|
||||
</div>
|
||||
<div class="marker">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+2
-2
@@ -50,13 +50,13 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
--fcc-editable-region--
|
||||
background-color: red;
|
||||
--fcc-editable-region--
|
||||
margin: 10px auto;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
+1
-1
@@ -57,9 +57,9 @@ assert.isTrue(containerThirdChild?.classList?.contains('three'));
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
--fcc-editable-region--
|
||||
<div class="marker one">
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="marker">
|
||||
</div>
|
||||
<div class="marker">
|
||||
|
||||
+3
-3
@@ -73,11 +73,11 @@ h1 {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.one {
|
||||
background-color: red;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background-color: red;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: green;
|
||||
|
||||
+3
-3
@@ -65,11 +65,11 @@ h1 {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.two {
|
||||
background-color: rgb(0, 255, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background-color: rgb(0, 255, 0);
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 255);
|
||||
|
||||
+3
-2
@@ -57,12 +57,13 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.container {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
|
||||
+3
-3
@@ -66,11 +66,11 @@ h1 {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.two {
|
||||
background-color: rgb(0, 127, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background-color: rgb(0, 127, 0);
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 255);
|
||||
|
||||
+2
-2
@@ -51,12 +51,12 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.container {
|
||||
--fcc-editable-region--
|
||||
background-color: rgb(0, 0, 0);
|
||||
--fcc-editable-region--
|
||||
padding: 10px 0;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
|
||||
+3
-3
@@ -62,11 +62,11 @@ h1 {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.one {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background-color: rgb(255, 0, 0);
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 255, 0);
|
||||
|
||||
+3
-3
@@ -64,11 +64,11 @@ h1 {
|
||||
background-color: rgb(255, 255, 0);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.two {
|
||||
background-color: rgb(0, 255, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background-color: rgb(0, 255, 0);
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 255);
|
||||
|
||||
+3
-3
@@ -68,10 +68,10 @@ h1 {
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.three {
|
||||
background-color: rgb(0, 0, 255);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background-color: rgb(0, 0, 255);
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
+3
-3
@@ -62,11 +62,11 @@ h1 {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.one {
|
||||
background-color: rgb(255, 255, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background-color: rgb(255, 255, 0);
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 255, 255);
|
||||
|
||||
+3
-3
@@ -66,11 +66,11 @@ h1 {
|
||||
background-color: rgb(255, 127, 0);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.two {
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background-color: rgb(0, 255, 255);
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(255, 0, 255);
|
||||
|
||||
+3
-3
@@ -68,10 +68,10 @@ h1 {
|
||||
background-color: rgb(0, 255, 127);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.three {
|
||||
background-color: rgb(255, 0, 255);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background-color: rgb(255, 0, 255);
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
+3
-2
@@ -55,11 +55,12 @@ assert.strictEqual(new __helpers.CSSHelp(document).getStyle('h1')?.backgroundCol
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
|
||||
+3
-3
@@ -69,11 +69,11 @@ h1 {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.two {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background-color: rgb(255, 0, 0);
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 0);
|
||||
|
||||
+3
-3
@@ -47,12 +47,12 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('h1')?.backgroundColor);
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
h1 {
|
||||
text-align: center;
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background-color: rgb(0, 255, 255);
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
|
||||
+1
-1
@@ -46,12 +46,12 @@ assert.isTrue(containerFirstChild?.classList?.contains('red'));
|
||||
<div class="container">
|
||||
--fcc-editable-region--
|
||||
<div class="marker one">
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+1
-2
@@ -74,6 +74,7 @@ h1 {
|
||||
|
||||
--fcc-editable-region--
|
||||
.one {
|
||||
--fcc-editable-region--
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
@@ -84,6 +85,4 @@ h1 {
|
||||
.three {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
+2
-2
@@ -60,9 +60,10 @@ h1 {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
--fcc-editable-region--
|
||||
background-color: rgb(0, 0, 0);
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.two {
|
||||
@@ -72,6 +73,5 @@ h1 {
|
||||
.three {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
+1
-1
@@ -57,9 +57,9 @@ assert.isTrue(containerThirdChild?.classList?.contains('blue'));
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
--fcc-editable-region--
|
||||
<div class="marker red">
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
|
||||
+1
-1
@@ -90,11 +90,11 @@ h1 {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.two {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
+3
-3
@@ -68,11 +68,11 @@ h1 {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.green {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background-color: rgb(0, 0, 0);
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: rgb(0, 0, 0);
|
||||
|
||||
+3
-3
@@ -72,11 +72,11 @@ h1 {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.green {
|
||||
background-color: #00FF00;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background-color: #00FF00;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: rgb(0, 0, 0);
|
||||
|
||||
+3
-3
@@ -78,10 +78,10 @@ h1 {
|
||||
background-color: #007F00;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.blue {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background-color: rgb(0, 0, 0);
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
+3
-3
@@ -66,11 +66,11 @@ h1 {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background-color: rgb(255, 0, 0);
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
|
||||
+3
-3
@@ -70,11 +70,11 @@ h1 {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: rgb(255, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background: rgb(255, 0, 0);
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
|
||||
+3
-3
@@ -62,11 +62,11 @@ h1 {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0));
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
|
||||
+3
-3
@@ -68,11 +68,11 @@ h1 {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255));
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
|
||||
+3
-2
@@ -62,11 +62,12 @@ h1 {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
|
||||
+3
-3
@@ -60,11 +60,11 @@ h1 {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(180deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background: linear-gradient(180deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255));
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
|
||||
+2
-2
@@ -62,11 +62,11 @@ h1 {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
--fcc-editable-region--
|
||||
background: linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
|
||||
+3
-3
@@ -62,11 +62,11 @@ h1 {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%);
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
|
||||
+2
-2
@@ -62,11 +62,11 @@ h1 {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
--fcc-editable-region--
|
||||
background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(0, 0, 255) 100%);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
|
||||
+3
-3
@@ -66,11 +66,11 @@ h1 {
|
||||
background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background-color: #007F00;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
|
||||
+3
-3
@@ -66,11 +66,11 @@ h1 {
|
||||
background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.green {
|
||||
background: #007F00;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background: #007F00;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
|
||||
+3
-3
@@ -66,11 +66,11 @@ h1 {
|
||||
background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.green {
|
||||
background: linear-gradient(180deg, #55680D, #71F53E);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background: linear-gradient(180deg, #55680D, #71F53E);
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
|
||||
+3
-3
@@ -64,11 +64,11 @@ h1 {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%);
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(180deg, #55680D, #71F53E, #116C31);
|
||||
|
||||
+3
-3
@@ -70,10 +70,10 @@ h1 {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
+3
-3
@@ -68,10 +68,10 @@ h1 {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.blue {
|
||||
background: hsl(240, 100%, 50%);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background: hsl(240, 100%, 50%);
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
+3
-3
@@ -68,10 +68,10 @@ h1 {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background: linear-gradient(hsl(186, 76%, 16%));
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
+3
-3
@@ -68,10 +68,10 @@ h1 {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%));
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
+3
-2
@@ -46,10 +46,11 @@ assert.isTrue(redMarkerChild?.classList?.contains('sleeve'));
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
--fcc-editable-region--
|
||||
<div class="marker red">
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
|
||||
+3
-2
@@ -69,13 +69,14 @@ h1 {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
|
||||
+3
-2
@@ -69,14 +69,15 @@ h1 {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left-width: 10px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
|
||||
+3
-2
@@ -71,15 +71,16 @@ h1 {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left-width: 10px;
|
||||
border-left-style: solid;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
|
||||
+2
-2
@@ -93,16 +93,16 @@ h1 {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
--fcc-editable-region--
|
||||
border-left-width: 10px;
|
||||
border-left-style: solid;
|
||||
border-left-color: black;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
|
||||
+3
-3
@@ -69,14 +69,14 @@ h1 {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px solid black;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
border-left: 10px solid black;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
|
||||
+3
-2
@@ -63,12 +63,13 @@ h1 {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
|
||||
+3
-2
@@ -65,13 +65,14 @@ h1 {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
|
||||
+3
-3
@@ -65,14 +65,14 @@ h1 {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
opacity: 0.5;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
opacity: 0.5;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
|
||||
+3
-3
@@ -71,13 +71,13 @@ h1 {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background-color: white;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
|
||||
+3
-2
@@ -55,11 +55,12 @@ assert.isBelow(redMarkerChildren.indexOf(cap), redMarkerChildren.indexOf(sleeve)
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
--fcc-editable-region--
|
||||
<div class="marker red">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
|
||||
+3
-3
@@ -62,11 +62,11 @@ h1 {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(90deg);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background: linear-gradient(90deg);
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
|
||||
+3
-3
@@ -62,11 +62,11 @@ h1 {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(90deg, rgb(255, 0, 0));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background: linear-gradient(90deg, rgb(255, 0, 0));
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
|
||||
+3
-3
@@ -64,11 +64,11 @@ h1 {
|
||||
background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.green {
|
||||
background: linear-gradient(180deg, #55680D);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
background: linear-gradient(180deg, #55680D);
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
|
||||
+3
-3
@@ -69,14 +69,14 @@ h1 {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px double black;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
border-left: 10px double black;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
|
||||
+1
-1
@@ -63,11 +63,11 @@ assert.isBelow(blueMarkerChildren.indexOf(blueMarkerCap), blueMarkerChildren.ind
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
--fcc-editable-region--
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
|
||||
+3
-2
@@ -101,11 +101,12 @@ h1 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
|
||||
+3
-3
@@ -86,12 +86,12 @@ h1 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
box-shadow: 5px 5px red;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
box-shadow: 5px 5px red;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
|
||||
+3
-2
@@ -95,11 +95,12 @@ h1 {
|
||||
box-shadow: -5px -5px red;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
|
||||
+3
-2
@@ -102,10 +102,11 @@ h1 {
|
||||
box-shadow: 5px 5px 5px green;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
+3
-3
@@ -84,12 +84,12 @@ h1 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
box-shadow: -5px -5px red;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
box-shadow: -5px -5px red;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
|
||||
+3
-3
@@ -84,12 +84,12 @@ h1 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
box-shadow: 0 0 20px 0 red;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
box-shadow: 0 0 20px 0 red;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
|
||||
+3
-3
@@ -87,12 +87,12 @@ h1 {
|
||||
box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
box-shadow: 0 0 20px 0 green;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
box-shadow: 0 0 20px 0 green;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
|
||||
+3
-3
@@ -94,12 +94,12 @@ h1 {
|
||||
box-shadow: 0 0 20px 0 #3B7E20CC;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
box-shadow: 0 0 20px 0 blue;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
box-shadow: 0 0 20px 0 blue;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user