# guilhermehsouza/aulacss architecture

> Architecture diagram of the GitHub repository guilhermehsouza/aulacss, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/guilhermehsouza/aulacss
- Repository: https://github.com/guilhermehsouza/aulacss

## Overview

The tree suggests a collection of HTML/CSS teaching materials organized into two lessons, plus a presentation. No README or source excerpts were provided, so the topics, runtime behavior, and relationships between files cannot be verified; the graph therefore shows the materials without inferred workflow edges.

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_aula01["Aula 01"]
  node_aula01_css["Stylesheet<br/>[estilos.css]"]
  node_aula01_exemplo2["Exemplo 2<br/>[exemplo2.html]"]
  node_aula01_exemplo21["Exemplo 2.1<br/>[exemplo21.html]"]
  node_aula01_exemplo22["Exemplo 2.2<br/>[exemplo22.html]"]
  node_aula01_exemplo3["Exemplo 3<br/>[exemplo3.html]"]
  node_aula01_exemplo31["Exemplo 3.1<br/>[exemplo31.html]"]
  node_aula01_exemplo32["Exemplo 3.2<br/>[exemplo32.html]"]
end

subgraph group_aula02["Aula 02"]
  node_aula02_css["Stylesheet<br/>[estilos.css]"]
  node_aula02_exemplo1["Exemplo 1<br/>[exemplo1.html]"]
  node_aula02_exemplo2["Exemplo 2<br/>[exemplo2.html]"]
  node_aula02_exemplo3["Exemplo 3<br/>[exemplo3.html]"]
  node_aula02_exemplo4["Exemplo 4<br/>[exemplo4.html]"]
  node_aula02_exemplo5["Exemplo 5<br/>[exemplo5.html]"]
  node_aula02_exercicio1["Exercício 1<br/>[exercicio1.html]"]
  node_aula02_exercicio2["Exercício 2<br/>[exercicio2.html]"]
  node_aula02_exercicio3["Exercício 3<br/>[exercicio3.html]"]
  node_aula02_exercicio4["Exercício 4<br/>[exercicio4.html]"]
  node_aula02_exercicio5["Exercício 5<br/>[exercicio5.html]"]
  node_aula02_exercicio6["Exercício 6<br/>[exercicio6.html]"]
  node_aula02_exercicio7["Exercício 7<br/>[exercicio7.html]"]
  node_aula02_index["Lesson index<br/>[index.html]"]
end

node_lesson_slides["Lesson slides"]

click node_aula01_css "https://github.com/guilhermehsouza/aulacss/blob/main/aula01/estilos.css"
click node_aula01_exemplo2 "https://github.com/guilhermehsouza/aulacss/blob/main/aula01/exemplo2.html"
click node_aula01_exemplo21 "https://github.com/guilhermehsouza/aulacss/blob/main/aula01/exemplo21.html"
click node_aula01_exemplo22 "https://github.com/guilhermehsouza/aulacss/blob/main/aula01/exemplo22.html"
click node_aula01_exemplo3 "https://github.com/guilhermehsouza/aulacss/blob/main/aula01/exemplo3.html"
click node_aula01_exemplo31 "https://github.com/guilhermehsouza/aulacss/blob/main/aula01/exemplo31.html"
click node_aula01_exemplo32 "https://github.com/guilhermehsouza/aulacss/blob/main/aula01/exemplo32.html"
click node_aula02_css "https://github.com/guilhermehsouza/aulacss/blob/main/aula02/estilos.css"
click node_aula02_exemplo1 "https://github.com/guilhermehsouza/aulacss/blob/main/aula02/exemplo1.html"
click node_aula02_exemplo2 "https://github.com/guilhermehsouza/aulacss/blob/main/aula02/exemplo2.html"
click node_aula02_exemplo3 "https://github.com/guilhermehsouza/aulacss/blob/main/aula02/exemplo3.html"
click node_aula02_exemplo4 "https://github.com/guilhermehsouza/aulacss/blob/main/aula02/exemplo4.html"
click node_aula02_exemplo5 "https://github.com/guilhermehsouza/aulacss/blob/main/aula02/exemplo5.html"
click node_aula02_exercicio1 "https://github.com/guilhermehsouza/aulacss/blob/main/aula02/exercicio1.html"
click node_aula02_exercicio2 "https://github.com/guilhermehsouza/aulacss/blob/main/aula02/exercicio2.html"
click node_aula02_exercicio3 "https://github.com/guilhermehsouza/aulacss/blob/main/aula02/exercicio3.html"
click node_aula02_exercicio4 "https://github.com/guilhermehsouza/aulacss/blob/main/aula02/exercicio4.html"
click node_aula02_exercicio5 "https://github.com/guilhermehsouza/aulacss/blob/main/aula02/exercicio5.html"
click node_aula02_exercicio6 "https://github.com/guilhermehsouza/aulacss/blob/main/aula02/exercicio6.html"
click node_aula02_exercicio7 "https://github.com/guilhermehsouza/aulacss/blob/main/aula02/exercicio7.html"
click node_aula02_index "https://github.com/guilhermehsouza/aulacss/blob/main/aula02/index.html"
click node_lesson_slides "https://github.com/guilhermehsouza/aulacss/blob/main/Aula%2002%20-%20Passo%20a%20Passo.pptx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_aula01_css,node_aula01_exemplo2,node_aula01_exemplo21,node_aula01_exemplo22,node_aula01_exemplo3,node_aula01_exemplo31,node_aula01_exemplo32 toneBlue
class node_aula02_css,node_aula02_exemplo1,node_aula02_exemplo2,node_aula02_exemplo3,node_aula02_exemplo4,node_aula02_exemplo5,node_aula02_exercicio1,node_aula02_exercicio2,node_aula02_exercicio3,node_aula02_exercicio4,node_aula02_exercicio5,node_aula02_exercicio6,node_aula02_exercicio7,node_aula02_index toneAmber
class node_lesson_slides toneTeal
```

## Components

### Aula 01

- [Stylesheet](https://github.com/guilhermehsouza/aulacss/blob/main/aula01/estilos.css): `aula01/estilos.css`
- [Exemplo 2](https://github.com/guilhermehsouza/aulacss/blob/main/aula01/exemplo2.html): `aula01/exemplo2.html`
- [Exemplo 2.1](https://github.com/guilhermehsouza/aulacss/blob/main/aula01/exemplo21.html): `aula01/exemplo21.html`
- [Exemplo 2.2](https://github.com/guilhermehsouza/aulacss/blob/main/aula01/exemplo22.html): `aula01/exemplo22.html`
- [Exemplo 3](https://github.com/guilhermehsouza/aulacss/blob/main/aula01/exemplo3.html): `aula01/exemplo3.html`
- [Exemplo 3.1](https://github.com/guilhermehsouza/aulacss/blob/main/aula01/exemplo31.html): `aula01/exemplo31.html`
- [Exemplo 3.2](https://github.com/guilhermehsouza/aulacss/blob/main/aula01/exemplo32.html): `aula01/exemplo32.html`

### Aula 02

- [Stylesheet](https://github.com/guilhermehsouza/aulacss/blob/main/aula02/estilos.css): `aula02/estilos.css`
- [Exemplo 1](https://github.com/guilhermehsouza/aulacss/blob/main/aula02/exemplo1.html): `aula02/exemplo1.html`
- [Exemplo 2](https://github.com/guilhermehsouza/aulacss/blob/main/aula02/exemplo2.html): `aula02/exemplo2.html`
- [Exemplo 3](https://github.com/guilhermehsouza/aulacss/blob/main/aula02/exemplo3.html): `aula02/exemplo3.html`
- [Exemplo 4](https://github.com/guilhermehsouza/aulacss/blob/main/aula02/exemplo4.html): `aula02/exemplo4.html`
- [Exemplo 5](https://github.com/guilhermehsouza/aulacss/blob/main/aula02/exemplo5.html): `aula02/exemplo5.html`
- [Exercício 1](https://github.com/guilhermehsouza/aulacss/blob/main/aula02/exercicio1.html): `aula02/exercicio1.html`
- [Exercício 2](https://github.com/guilhermehsouza/aulacss/blob/main/aula02/exercicio2.html): `aula02/exercicio2.html`
- [Exercício 3](https://github.com/guilhermehsouza/aulacss/blob/main/aula02/exercicio3.html): `aula02/exercicio3.html`
- [Exercício 4](https://github.com/guilhermehsouza/aulacss/blob/main/aula02/exercicio4.html): `aula02/exercicio4.html`
- [Exercício 5](https://github.com/guilhermehsouza/aulacss/blob/main/aula02/exercicio5.html): `aula02/exercicio5.html`
- [Exercício 6](https://github.com/guilhermehsouza/aulacss/blob/main/aula02/exercicio6.html): `aula02/exercicio6.html`
- [Exercício 7](https://github.com/guilhermehsouza/aulacss/blob/main/aula02/exercicio7.html): `aula02/exercicio7.html`
- [Lesson index](https://github.com/guilhermehsouza/aulacss/blob/main/aula02/index.html): `aula02/index.html`

### Other components

- [Lesson slides](https://github.com/guilhermehsouza/aulacss/blob/main/Aula%2002%20-%20Passo%20a%20Passo.pptx): `Aula 02 - Passo a Passo.pptx`