diff --git a/public/codes/css/introduction-css/at-rule-import/css/style.css b/public/codes/css/introduction/at-rule-import/css/style.css
similarity index 100%
rename from public/codes/css/introduction-css/at-rule-import/css/style.css
rename to public/codes/css/introduction/at-rule-import/css/style.css
diff --git a/public/codes/css/introduction-css/at-rule-import/index.html b/public/codes/css/introduction/at-rule-import/index.html
similarity index 100%
rename from public/codes/css/introduction-css/at-rule-import/index.html
rename to public/codes/css/introduction/at-rule-import/index.html
diff --git a/public/codes/css/introduction-css/css-external/css/style.css b/public/codes/css/introduction/css-external/css/style.css
similarity index 100%
rename from public/codes/css/introduction-css/css-external/css/style.css
rename to public/codes/css/introduction/css-external/css/style.css
diff --git a/public/codes/css/introduction-css/css-external/index.html b/public/codes/css/introduction/css-external/index.html
similarity index 100%
rename from public/codes/css/introduction-css/css-external/index.html
rename to public/codes/css/introduction/css-external/index.html
diff --git a/public/codes/css/introduction-css/css-inline/index.html b/public/codes/css/introduction/css-inline/index.html
similarity index 100%
rename from public/codes/css/introduction-css/css-inline/index.html
rename to public/codes/css/introduction/css-inline/index.html
diff --git a/public/codes/css/introduction-css/css-internal/index.html b/public/codes/css/introduction/css-internal/index.html
similarity index 100%
rename from public/codes/css/introduction-css/css-internal/index.html
rename to public/codes/css/introduction/css-internal/index.html
diff --git a/public/codes/css/introduction-css/css-unit/index.html b/public/codes/css/introduction/css-unit/index.html
similarity index 100%
rename from public/codes/css/introduction-css/css-unit/index.html
rename to public/codes/css/introduction/css-unit/index.html
diff --git a/public/codes/css/introduction-css/css-variable/css/style.css b/public/codes/css/introduction/css-variable/css/style.css
similarity index 100%
rename from public/codes/css/introduction-css/css-variable/css/style.css
rename to public/codes/css/introduction/css-variable/css/style.css
diff --git a/public/codes/css/introduction-css/css-variable/index.html b/public/codes/css/introduction/css-variable/index.html
similarity index 100%
rename from public/codes/css/introduction-css/css-variable/index.html
rename to public/codes/css/introduction/css-variable/index.html
diff --git a/public/codes/css/introduction-css/deprecated-center/index.html b/public/codes/css/introduction/deprecated-center/index.html
similarity index 100%
rename from public/codes/css/introduction-css/deprecated-center/index.html
rename to public/codes/css/introduction/deprecated-center/index.html
diff --git a/public/codes/css/introduction-css/deprecated-font/index.html b/public/codes/css/introduction/deprecated-font/index.html
similarity index 100%
rename from public/codes/css/introduction-css/deprecated-font/index.html
rename to public/codes/css/introduction/deprecated-font/index.html
diff --git a/public/codes/css/introduction-css/function-calc/css/style.css b/public/codes/css/introduction/function-calc/css/style.css
similarity index 100%
rename from public/codes/css/introduction-css/function-calc/css/style.css
rename to public/codes/css/introduction/function-calc/css/style.css
diff --git a/public/codes/css/introduction-css/function-calc/index.html b/public/codes/css/introduction/function-calc/index.html
similarity index 100%
rename from public/codes/css/introduction-css/function-calc/index.html
rename to public/codes/css/introduction/function-calc/index.html
diff --git a/public/codes/css/introduction-css/function-rgb/css/style.css b/public/codes/css/introduction/function-rgb/css/style.css
similarity index 100%
rename from public/codes/css/introduction-css/function-rgb/css/style.css
rename to public/codes/css/introduction/function-rgb/css/style.css
diff --git a/public/codes/css/introduction-css/function-rgb/index.html b/public/codes/css/introduction/function-rgb/index.html
similarity index 100%
rename from public/codes/css/introduction-css/function-rgb/index.html
rename to public/codes/css/introduction/function-rgb/index.html
diff --git a/public/codes/css/introduction-css/media-print/css/style.css b/public/codes/css/introduction/media-print/css/style.css
similarity index 100%
rename from public/codes/css/introduction-css/media-print/css/style.css
rename to public/codes/css/introduction/media-print/css/style.css
diff --git a/public/codes/css/introduction-css/media-print/index.html b/public/codes/css/introduction/media-print/index.html
similarity index 100%
rename from public/codes/css/introduction-css/media-print/index.html
rename to public/codes/css/introduction/media-print/index.html
diff --git a/public/codes/css/introduction-css/property-font/css/style.css b/public/codes/css/introduction/property-font/css/style.css
similarity index 100%
rename from public/codes/css/introduction-css/property-font/css/style.css
rename to public/codes/css/introduction/property-font/css/style.css
diff --git a/public/codes/css/introduction-css/property-font/index.html b/public/codes/css/introduction/property-font/index.html
similarity index 100%
rename from public/codes/css/introduction-css/property-font/index.html
rename to public/codes/css/introduction/property-font/index.html
diff --git a/public/codes/css/introduction-css/selector-class/css/style.css b/public/codes/css/introduction/selector-class/css/style.css
similarity index 100%
rename from public/codes/css/introduction-css/selector-class/css/style.css
rename to public/codes/css/introduction/selector-class/css/style.css
diff --git a/public/codes/css/introduction-css/selector-class/index.html b/public/codes/css/introduction/selector-class/index.html
similarity index 100%
rename from public/codes/css/introduction-css/selector-class/index.html
rename to public/codes/css/introduction/selector-class/index.html
diff --git a/public/codes/css/introduction-css/selector-descendant-combinator/css/style.css b/public/codes/css/introduction/selector-descendant-combinator/css/style.css
similarity index 100%
rename from public/codes/css/introduction-css/selector-descendant-combinator/css/style.css
rename to public/codes/css/introduction/selector-descendant-combinator/css/style.css
diff --git a/public/codes/css/introduction-css/selector-descendant-combinator/index.html b/public/codes/css/introduction/selector-descendant-combinator/index.html
similarity index 100%
rename from public/codes/css/introduction-css/selector-descendant-combinator/index.html
rename to public/codes/css/introduction/selector-descendant-combinator/index.html
diff --git a/public/codes/css/introduction-css/selector-element/css/style.css b/public/codes/css/introduction/selector-element/css/style.css
similarity index 100%
rename from public/codes/css/introduction-css/selector-element/css/style.css
rename to public/codes/css/introduction/selector-element/css/style.css
diff --git a/public/codes/css/introduction-css/selector-element/index.html b/public/codes/css/introduction/selector-element/index.html
similarity index 100%
rename from public/codes/css/introduction-css/selector-element/index.html
rename to public/codes/css/introduction/selector-element/index.html
diff --git a/public/codes/css/introduction-css/selector-id/css/style.css b/public/codes/css/introduction/selector-id/css/style.css
similarity index 100%
rename from public/codes/css/introduction-css/selector-id/css/style.css
rename to public/codes/css/introduction/selector-id/css/style.css
diff --git a/public/codes/css/introduction-css/selector-id/index.html b/public/codes/css/introduction/selector-id/index.html
similarity index 100%
rename from public/codes/css/introduction-css/selector-id/index.html
rename to public/codes/css/introduction/selector-id/index.html
diff --git a/src/content/classnotes/css/introduction/index.mdx b/src/content/classnotes/css/introduction/index.mdx
index 44d4a3f..17addeb 100644
--- a/src/content/classnotes/css/introduction/index.mdx
+++ b/src/content/classnotes/css/introduction/index.mdx
@@ -3,6 +3,7 @@ title: Introdução ao CSS
 ---
 
 import CodeHtmlCssPreview from '../../../../components/CodeHtmlCssPreview.astro';
+import CodeHtmlPreview from '../../../../components/CodeHtmlPreview.astro';
 
 # {frontmatter.title}
 
@@ -12,13 +13,13 @@ import CodeHtmlCssPreview from '../../../../components/CodeHtmlCssPreview.astro'
 
 ### `<center>`
 
-<CodeHtmlCssPreview src="/codes/css/introduction-css/deprecated-center" />
+<CodeHtmlPreview src="/codes/css/introduction/deprecated-center" />
 
 Referência: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center)
 
 ### `<font>`
 
-<CodeHtmlCssPreview src="/codes/css/introduction-css/deprecated-font" />
+<CodeHtmlPreview src="/codes/css/introduction/deprecated-font" />
 
 Referência: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font)
 
@@ -36,7 +37,7 @@ Referência: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fon
 
 Atributo style="":
 
-<CodeHtmlCssPreview src="/codes/css/introduction-css/css-inline" htmlHighlightLines="2,8,14" />
+<CodeHtmlPreview src="/codes/css/introduction/css-inline" htmlHighlightLines="2,8,14" />
 
 ### Internal stylesheet
 
@@ -52,7 +53,7 @@ selector
 
  Tag Style:
 
-<CodeHtmlCssPreview src="/codes/css/introduction-css/css-internal" onlyBody={false} htmlHighlightLines="6-15" />
+<CodeHtmlPreview src="/codes/css/introduction/css-internal" onlyBody={false} htmlHighlightLines="6-15" />
 
 ### External stylesheet
 
@@ -62,57 +63,57 @@ selector
 
 Exemplo:
 
-<CodeHtmlCssPreview src="/codes/css/introduction-css/css-external" onlyBody={false} codeTree={true} htmlHighlightLines="8" />
+<CodeHtmlCssPreview src="/codes/css/introduction/css-external" onlyBody={false} codeTree={true} htmlHighlightLines="8" />
 
 ## Sintaxe do CSS
 
 ### Propriedades
 
-<CodeHtmlCssPreview src="/codes/css/introduction-css/property-font" cssHighlightLines="2-5,10" />
+<CodeHtmlCssPreview src="/codes/css/introduction/property-font" cssHighlightLines="2-5,10" />
 
 ### Seletores
 
 #### Elemento
 
-<CodeHtmlCssPreview src="/codes/css/introduction-css/selector-element" cssHighlightLines="1,5,11" />
+<CodeHtmlCssPreview src="/codes/css/introduction/selector-element" cssHighlightLines="1,5,11" />
 
 #### `#id`
 
-<CodeHtmlCssPreview src="/codes/css/introduction-css/selector-id" cssHighlightLines="5" />
+<CodeHtmlCssPreview src="/codes/css/introduction/selector-id" cssHighlightLines="5" />
 
 #### `.class`
 
-<CodeHtmlCssPreview src="/codes/css/introduction-css/selector-class" cssHighlightLines="5" />
+<CodeHtmlCssPreview src="/codes/css/introduction/selector-class" cssHighlightLines="5" />
 
 #### Descendant combinator
 
-<CodeHtmlCssPreview src="/codes/css/introduction-css/selector-descendant-combinator" cssHighlightLines="1" />
+<CodeHtmlCssPreview src="/codes/css/introduction/selector-descendant-combinator" cssHighlightLines="1" />
 
 ### Função
 
 #### `rgb()` e `rgba()`
 
-<CodeHtmlCssPreview src="/codes/css/introduction-css/function-rgb" cssHighlightLines="2,6" />
+<CodeHtmlCssPreview src="/codes/css/introduction/function-rgb" cssHighlightLines="2,6" />
 
 #### `calc()`
 
-<CodeHtmlCssPreview src="/codes/css/introduction-css/function-calc" cssHighlightLines="2" />
+<CodeHtmlCssPreview src="/codes/css/introduction/function-calc" cssHighlightLines="2" />
 
 ### At-rules
 
-<CodeHtmlCssPreview src="/codes/css/introduction-css/at-rule-import" onlyBody={false} htmlHighlightLines="9" />
+<CodeHtmlCssPreview src="/codes/css/introduction/at-rule-import" onlyBody={false} htmlHighlightLines="9" />
 
 ### Media Query
 
-<CodeHtmlCssPreview src="/codes/css/introduction-css/media-print" cssHighlightLines="6" />
+<CodeHtmlCssPreview src="/codes/css/introduction/media-print" cssHighlightLines="6" />
 
 ### Variáveis
 
-<CodeHtmlCssPreview src="/codes/css/introduction-css/css-variable" cssHighlightLines="3-4,9-10,14-15" />
+<CodeHtmlCssPreview src="/codes/css/introduction/css-variable" cssHighlightLines="3-4,9-10,14-15" />
 
 ### Unidades de Medida
 
-<CodeHtmlCssPreview src="/codes/css/introduction-css/css-unit" isShowCss={false} htmlHighlightLines="1-2" />
+<CodeHtmlCssPreview src="/codes/css/introduction/css-unit" isShowCss={false} htmlHighlightLines="1-2" />
 
 - [`<lenght>`](https://developer.mozilla.org/en-US/docs/Web/CSS/lenght): px, em, rem, cm, mm, in, pt, pc, vh, vw, vmin, vmax, %
 - [`<color>`](https://developer.mozilla.org/en-US/docs/Web/CSS/color): `<named-color>`, `<hex-color>`, rgb(), rgba(), hsl(), hsla()