Notes update

docs/css/03-border-and-border-radius/03-border-and-border-radius.md

@@ -1,9 +1,3 @@
----
-title: Border and Border Radius
-description: "Border and Border Radius"
-hide_table_of_contents: true
----
-
 ## Border
 
 A border is a decorative or structural element that can be added to HTML elements to visually separate them from other elements. It is a line that surrounds the content of an element and can be customized in terms of color, width, and style.
@@ -36,7 +30,7 @@ The code you provided is used to style the border of an HTML element. It has thr
 
 **There are four types of border styles you can use:**
 
-1. **`solid` :** Creates a continuous line.👉**********\_\_\_**********
+1. **`solid` :** Creates a continuous line.👉****\*\*****\_\_\_****\*\*****
 
 2. **`double` :** Creates two parallel lines. 👉 **====**
 

docs/css/05-box-model/05-box-model.md

@@ -4,28 +4,83 @@ description: "Box Model"
 hide_table_of_contents: true
 ---
 
-# Box Model
+# 📦 CSS Box Model
 
-The CSS Box Model is a fundamental concept that describes how elements on a webpage are rendered and how their dimensions are calculated. It consists of four layers: content, padding, margin, and border. In this guide, we'll explore the concepts of padding and margin, and provide examples to illustrate their usage.
+The CSS Box Model is a basic concept in web design.  
+It explains how every HTML element is displayed as a rectangular box and how its size is calculated.
 
-**Box Model Compoments**
+Every box has four main parts:
 
-- **content**: it specifies the data to be inserted, content is used to take space in output, without any content it will not show output.
+- Content
+- Padding
+- Border
+- Margin
 
-- **height**: specifies the height of the box.
+These parts together decide the total size of an element.
 
-- **width**: specifies the width of the box.
+---
 
-- **margin**: margin is used to leave space from the outside the box.
+## 🗃️ Box Model With Detail Description
 
-- **padding**: Specifies the inner spacing from the box border.
+<img src="/css/13/output1.png" alt="output-1" width="600px"/>
 
-- **border**: specifies the border size and colours.
+---
 
-**🗃️BOX MODEL WITH DETAIL DESCRIPTION:**
+## 🔹 Box Model Components
 
-<img src="/css/13/output1.png" alt="output-1" width="600px"/>
+### 1) Content
+
+- This is the actual data inside the element (text, image, etc.).
+- The content area takes space on the webpage.
+- If there is no content and no height/width is given, the element may not be visible.
+
+---
+
+### 2) Width
+
+- Defines how wide the content area is.
+- Example: `width: 200px;`
+
+---
+
+### 3) Height
+
+- Defines how tall the content area is.
+- Example: `height: 100px;`
+
+---
+
+### 4) Padding
+
+- Padding is the space inside the box, between the content and the border.
+- It increases the space around the content.
+- Example: `padding: 20px;`
+
+---
+
+### 5) Border
+
+- Border surrounds the padding and content.
+- You can control its size, style, and color.
+- Example: `border: 2px solid black;`
+
+---
+
+### 6) Margin
+
+- Margin is the space outside the box.
+- It creates distance between this element and other elements.
+- Example: `margin: 30px;`
+
+---
+
+## 📌 Summary
+
+When you style a box using CSS:
+
+- Content stays inside.
+- Padding gives inner spacing.
+- Border surrounds padding.
+- Margin creates outer spacing.
 
-:::note
-You can enhance the look of this box model using **CSS **.  
-:::
+These properties help improve the design and layout of a webpage.

docs/css/06-box-shadow/box-shadow.md

@@ -4,29 +4,77 @@ description: Box Shadow
 hide_table_of_contents: true
 ---
 
+# 🌑 Box Shadow
+
 ## Box-Shadow
 
-The `box-shadow` property is used to add one or more shadows to an element. It allows you to create visually appealing effects, such as giving the illusion of depth or highlighting elements.
+The `box-shadow` property adds shadow effects around an element.  
+It helps create depth and improves the visual look of elements on a webpage.
+
+---
 
-**The syntax for the box-shadow property is as follows:**
+## Syntax:
 
-           h-shadow v-shadow  blur spread  color
-              |       |      |      |       |
+```
+
+box-shadow: h-shadow v-shadow blur spread color;
+
+```
+
+### Example:
+
+```
 
 box-shadow: 5px 5px 5px 2px #808080;
 
-- **`h-shadow`** : The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, and a negative value puts the shadow on the left side.
-- **`v-shadow`** : The vertical offset of the shadow. A positive value puts the shadow below the box, and a negative value puts the shadow above.
+```
+
+---
+
+## Meaning of Each Value
+
+### h-shadow
+
+- Horizontal shadow position.
+- Positive value → Shadow moves right.
+- Negative value → Shadow moves left.
+
+---
+
+### v-shadow
+
+- Vertical shadow position.
+- Positive value → Shadow moves down.
+- Negative value → Shadow moves up.
+
+---
+
+### blur
+
+- Controls how blurry the shadow is.
+- Higher value = more blur.
+- `0` means sharp shadow.
+
+---
+
+### spread
 
-- **`blur`** : The blur radius. The higher the value, the more blurred the shadow will be.
+- Controls the size of the shadow.
+- Positive value → Shadow becomes bigger.
+- Negative value → Shadow becomes smaller.
 
-- **`spread`** : The spread radius. A positive value increases the size of the shadow, and a negative value decreases the size.
+---
 
-- **`color`** : The color of the shadow.
+### color
 
-**In the third example you provided, you want to add a box shadow to an image. Here's the code:**
+- Defines the color of the shadow.
+- You can use color name, HEX, or RGB values.
 
-**Code :**
+---
+
+# 🖼️ Image Shadow Example
+
+## Code :
 
 ```html
 <!DOCTYPE html>
@@ -54,15 +102,37 @@ box-shadow: 5px 5px 5px 2px #808080;
 </html>
 ```
 
-**Output :**
+---
+
+## Output :
 
 <img src="/css/07/screenshot4.png" alt="screenshot4" width="600px"/>
 
-In this example, there is an image element with the class `img-tiger`. The CSS styles defined for the class `img-tiger` specify that the image should have a height of `300px`, a border-radius of `50px`, and a margin of `30px`. The `box-shadow` property is used to add a shadow to the image. The values `2px 2px 5px 10px` define the horizontal offset, vertical offset, blur radius, and spread radius of the shadow, respectively. The color of the shadow is specified as `rgb(138, 136, 136)`.
+---
+
+## Explanation
 
-When you view this HTML page in a browser, the image will have a box shadow applied to it according to the styles defined by the `.img-tiger` class. When you move your mouse over the image, the border-radius will change to 20px with a transition effect, as defined by the `.img-tiger:hover` selector.
+- The image height is set to `300px`.
+- `border-radius: 50px;` gives rounded corners.
+- `margin: 30px;` creates space outside the image.
+- `box-shadow: 2px 2px 5px 10px rgb(138,136,136);` adds a shadow:
 
-**Code :**
+  - `2px` → moves shadow right
+  - `2px` → moves shadow down
+  - `5px` → blur radius
+  - `10px` → spread size
+  - `rgb(138,136,136)` → gray color
+
+When you move the mouse over the image:
+
+- The border radius changes from `50px` to `20px`.
+- `transition: 2s;` makes the change smooth in 2 seconds.
+
+---
+
+# 🔘 Button Shadow Example
+
+## Code :
 
 ```html
 <!DOCTYPE html>
@@ -74,6 +144,7 @@ When you view this HTML page in a browser, the image will have a box shadow appl
         background-color: aquamarine;
         border-radius: 20px;
       }
+
       .btn:hover {
         box-shadow: 1px 1px 2px 2px gray;
       }
@@ -86,9 +157,24 @@ When you view this HTML page in a browser, the image will have a box shadow appl
 </html>
 ```
 
-**Output :**
+---
+
+## Output :
 
 <img src="/css/07/screenshot2.png" alt="screenshot2" width="600px"/>
 
-In this example, A button element with the class `"btn"` and the text `"Click Here"`. The `".btn"` class sets the button's background color to aquamarine and gives it rounded corners with a border-radius of 20 pixels.
-The `".btn:hover"` selector applies styles when the button is hovered over. It adds a gray box-shadow of 1 pixel horizontal and vertical offset, with a 2-pixel blur radius, creating a subtle `shadow` effect when the button is hovered.
+---
+
+## Explanation
+
+- The button background color is `aquamarine`.
+- `border-radius: 20px;` makes the button corners rounded.
+
+When you hover over the button:
+
+- A gray shadow appears.
+- `1px 1px` moves shadow slightly right and down.
+- `2px` blur makes it slightly soft.
+- `2px` spread increases shadow size slightly.
+
+This creates a simple shadow effect when the user moves the mouse over the button.