fix(curriculum): add box-shadow to css review (#65876)

Co-authored-by: majestic-owl448 <26656284+majestic-owl448@users.noreply.github.com>

curriculum/challenges/english/blocks/review-css-colors/671a90c1cf517678b130419e.md

@@ -99,7 +99,7 @@ div {
 
 ```html
 <link rel="stylesheet" href="styles.css">
-<h3 class="hex-text">Hex Text</h3>
+<h1 class="hex-text">Hex Text</h1>
 <p class="hex-bg">Hex Background</p>
 ```
 
@@ -115,6 +115,40 @@ p {
 
 :::
 
+## The `box-shadow` Property
+
+- **Definition**: The `box-shadow` property applies one or more shadows around an element.
+- **Offset Values**: You must specify horizontal (`offset-x`) and vertical (`offset-y`) values. Positive `offset-x` moves the shadow to the right, while negative values move it to the left. Positive `offset-y` moves the shadow down, while negative values move it up. If a value is `0`, you do not need to include a unit.
+- **Blur Radius**: This optional value controls how blurry the shadow appears. If not included, it defaults to `0`, which creates sharp edges. The higher the value, the softer the shadow.
+- **Spread Radius**: This optional value controls how much the shadow expands or shrinks. If not included, it defaults to `0`.
+- **Shadow Color**: You can specify the color using named colors, hex values, `rgb()`, `rgba()`, `hsl()`, or `hsla()` functions.
+- **`inset` Keyword**: Adding the `inset` keyword places the shadow inside the element instead of outside.
+- **Applying Multiple Box Shadows**: You can apply multiple shadows by separating them with commas. Shadows are layered from front to back.
+
+### Syntax
+
+```css
+box-shadow: offset-x offset-y blur-radius spread-radius color;
+```
+
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<div class="shadow-box">Shadow Color Example</div>
+```
+
+```css
+.shadow-box {
+  width: 200px;
+  padding: 20px;
+  background-color: lightblue;
+  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
+}
+```
+
+:::
+
 ## Linear and Radial Gradients 
 
 - **Linear Gradients**: These gradients create a gradual blend between colors along a straight line. You can control the direction of this line using keywords like `to top`, `to right`, `to bottom right`, or angles like `45deg`. You can use any valid CSS color and as many color stops as you would like.

curriculum/challenges/english/blocks/review-css/671a9a0a140c2b9d6a75629f.md

@@ -217,7 +217,42 @@ Review the concepts below to prepare for the upcoming exam.
 - **`rgba()` Function**: This function adds a fourth value —alpha— that controls the transparency of the color. 
 - **`hsl()` Function**: HSL stands for Hue, Saturation, and Lightness — three key components that define a color. 
 - **`hsla()` Function**: This function adds a fourth value — alpha — that controls the opacity of the color.
-- **Hexadecimal**: A hex code (short for hexadecimal code) is a six-character string used to represent colors in the RGB color model. The "hex" refers to the base-16 numbering system, which uses digits 0 to 9 and letters A to F. 
+- **Hexadecimal**: A hex code (short for hexadecimal code) is a six-character string used to represent colors in the RGB color model. The "hex" refers to the base-16 numbering system, which uses digits 0 to 9 and letters A to F.
+
+## `box-shadow` Property
+
+- **Definition**: The `box-shadow` property applies one or more shadows around an element.
+- **Offset Values**: You must specify horizontal (`offset-x`) and vertical (`offset-y`) values. Positive `offset-x` moves the shadow to the right, while negative values move it to the left. Positive `offset-y` moves the shadow down, while negative values move it up. If a value is `0`, you do not need to include a unit.
+- **Blur Radius**: This optional value controls how blurry the shadow appears. If not included, it defaults to `0`, which creates sharp edges. The higher the value, the softer the shadow.
+- **Spread Radius**: This optional value controls how much the shadow expands or shrinks. If not included, it defaults to `0`.
+- **Shadow Color**: You can specify the color using named colors, hex values, `rgb()`, `rgba()`, `hsl()`, or `hsla()` functions.
+- **`inset` Keyword**: Adding the `inset` keyword places the shadow inside the element instead of outside.
+- **Applying Multiple Box Shadows**: You can apply multiple shadows by separating them with commas. Shadows are layered from front to back.
+
+### Syntax
+
+```css
+box-shadow: offset-x offset-y blur-radius spread-radius color;
+```
+
+:::interactive_editor
+
+```html
+<div class="shadow-box">Shadow Example</div>
+
+<style>
+.shadow-box {
+  width: 200px;
+  padding: 20px;
+  margin: 20px;
+  background-color: lightblue;
+  text-align: center;
+  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);
+}
+</style>
+```
+
+:::
 
 ## Linear and Radial Gradients