Fix: broken links

Author: ajay-dhangar

docs/css/backgrounds/background-image/background-attachment.md

@@ -118,7 +118,7 @@ p {
 
 Now, you can see the output of the above code in the Browser Window like this:
 
-<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ backgroundImage: "url('/assets/jpeg-image.jpg')", color: "#fff", padding: "20px", minHeight: "200px", textAlign:"center", backgroundAttachment:"fixed" }}>
+<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ backgroundImage: "url('/tutorial/assets/jpeg-image.jpg')", color: "#fff", padding: "20px", minHeight: "200px", textAlign:"center", backgroundAttachment:"fixed" }}>
 <>
   <h1 style={{ fontSize: "2em", marginBottom: "0" }}>Fixed Background Image</h1>
   <p style={{ fontSize: "1.2em", marginTop: "0" }}>This is a div with a fixed background image.</p>

docs/css/backgrounds/background-image/background-position.md

@@ -130,7 +130,7 @@ Place an image file named `jpeg-image.jpg` in the `assets` directory of your pro
 Open the `index.html` file in a web browser to see the output. You will see a `<div>` element with a background image positioned at the top right corner of the background area.
 
 <BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ minHeight: "200px"}}>
-  <div style={{ backgroundImage: "url('/assets/jpeg-image.jpg')", backgroundPosition: "top right", height: "200px", width: "400px", border: "1px solid #333", backgroundSize: "cover", color:"#fff" }}>
+  <div style={{ backgroundImage: "url('/tutorial/assets/jpeg-image.jpg')", backgroundPosition: "top right", height: "200px", width: "400px", border: "1px solid #333", backgroundSize: "cover", color:"#fff" }}>
     <p style={{ padding: "10px" }}>
       This is a div with a background image positioned at the top right corner.
     </p>

docs/css/backgrounds/background-image/background-repeat.md

@@ -122,7 +122,7 @@ p {
 
 Now, you can see the output of the above code in the Browser Window like this:
 
-<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ backgroundImage: "url('/assets/jpeg-image.jpg')", padding: "20px", minHeight: "200px", textAlign:"center", backgroundRepeat:"repeat-x", backgroundSize:"cover" }}>
+<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ backgroundImage: "url('/tutorial/assets/jpeg-image.jpg')", padding: "20px", minHeight: "200px", textAlign:"center", backgroundRepeat:"repeat-x", backgroundSize:"cover" }}>
   <p style={{ color: "white", fontSize: "1.5rem" }}>
     This is a div with a background image that repeats horizontally and scales to cover the background area.
   </p>

docs/css/backgrounds/background-image/background-size.md

@@ -119,7 +119,7 @@ div {
 
 Now, you can see the output of the above code in the Browser Window like this:
 
-<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ backgroundImage: "url('/assets/jpeg-image.jpg')", color: "#fff", padding: "20px", minHeight: "200px", textAlign:"center", backgroundSize:"cover" }}>
+<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ backgroundImage: "url('/tutorial/assets/jpeg-image.jpg')", color: "#fff", padding: "20px", minHeight: "200px", textAlign:"center", backgroundSize:"cover" }}>
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac felis sit
     amet nunc ultrices ultricies. Nullam nec nunc nec nunc ultrices ultricies.

docs/css/box-model/margin-callapse.md

@@ -8,7 +8,7 @@ keywords:
   - margin collapse
   - css box model
   - css box model margin collapse
-description: Learn how CSS margin collapse works and how to prevent it in your web page layout.
+description: "Learn how CSS margin collapse works and how to prevent it in your web page layout."
 tags: 
     - css
     - margin collapse
@@ -74,7 +74,7 @@ By using these techniques, you can prevent margin collapse and control the spaci
 <AdsComponent />
 
 :::note Try it yourself
-Compare this snippet from [CSS Width and Height](/docs/css/box-model/width-height) to learn how to use the CSS `width` and `height` properties to control the dimensions of elements in your web page layout.
+Compare this snippet from [CSS Width and Height](/tutorial/css/box-model/width-height) to learn how to use the CSS `width` and `height` properties to control the dimensions of elements in your web page layout.
 :::
 
 ## Example for Margin Collapse

docs/css/box-model/min-width-height.md

@@ -81,7 +81,7 @@ By using the `min-width` and `min-height` properties, you can ensure that elemen
 <AdsComponent />
 
 :::info Additional Information
-Compare this snippet from [CSS Width and Height](/docs/css/box-model/width-height) to learn how to use the CSS `width` and `height` properties to control the dimensions of elements in your web page layout.
+Compare this snippet from [CSS Width and Height](/tutorial/css/box-model/width-height) to learn how to use the CSS `width` and `height` properties to control the dimensions of elements in your web page layout.
 :::
 
 ## Example for `min-width` and `min-height`

docs/css/colors/hsla.md

@@ -135,7 +135,7 @@ In the example above, HSLA color values are used to specify the colors of the `<
 
 By using HSLA color values, you can enhance the visual appearance of your web designs and create engaging color schemes with varying levels of transparency. HSLA color values provide a flexible way to specify colors based on hue, saturation, lightness, and alpha values, allowing you to create unique color effects and visually appealing designs in your web projects.
 
-If you want to learn more about CSS colors, you can check out our [CSS Colors](/docs/category/colors) guide for additional information on color models, color functions, and color formats in CSS.
+If you want to learn more about CSS colors, you can check out our [CSS Colors](/tutorial/category/colors) guide for additional information on color models, color functions, and color formats in CSS.
 
 ## Conclusion
 

docs/css/opacity.mdx

@@ -192,7 +192,7 @@ By using the `opacity` property in CSS, you can create various visual effects on
 
 :::note Try it yourself
 
-Compare this snippet from [CSS Box Model](/docs/category/box-model) to learn how to use the CSS box model to control the layout and spacing of elements on your web page.
+Compare this snippet from [CSS Box Model](/tutorial/category/box-model) to learn how to use the CSS box model to control the layout and spacing of elements on your web page.
 
 :::