From 7c40347e9c060f926456c1fc77b66c3c96d263ab Mon Sep 17 00:00:00 2001
From: Roberta Azambuja <robertaazambuja01@gmail.com>
Date: Mon, 13 Oct 2025 14:16:06 -0300
Subject: [PATCH 01/13] =?UTF-8?q?Removendo=20conte=C3=BAdo=20repetido=20da?=
 =?UTF-8?q?=20introdu=C3=A7=C3=A3o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dia-01/01-introducao-css/01-conteudo.md | 92 +++----------------------
 1 file changed, 8 insertions(+), 84 deletions(-)

diff --git a/dia-01/01-introducao-css/01-conteudo.md b/dia-01/01-introducao-css/01-conteudo.md
index e6e195c..cc8bee2 100644
--- a/dia-01/01-introducao-css/01-conteudo.md
+++ b/dia-01/01-introducao-css/01-conteudo.md
@@ -1,17 +1,19 @@
-### Introdução ao CSS
+# Introdução ao CSS
 
-#### O que é CSS?
+Agora que você já aprendeu a estruturar uma página utilizando HTML, chegou o momento de aprender como **estilizar** seus conteúdos e deixá-los visualmente atraentes. Enquanto o HTML cuida da **estrutura** e do **conteúdo**, o CSS cuida do **design** e da **experiência visual** do usuário. Eles trabalham juntos para criar páginas completas e bem apresentadas. 
+
+## O que é CSS?
 CSS, ou Cascading Style Sheets (Folhas de Estilo em Cascata), é uma linguagem de estilização utilizada para descrever a apresentação de documentos escritos em HTML ou XML. Ele foi criado para possibilitar a separação entre o conteúdo (HTML) e a apresentação (CSS), promovendo uma maior flexibilidade e eficiência no desenvolvimento de páginas web.
 
 Através do CSS, é possível controlar vários aspectos visuais dos elementos HTML, como cores, espaçamentos, fontes, tamanhos e layout geral da página. Com CSS, desenvolvedores conseguem criar páginas visualmente atraentes e responsivas, o que melhora a experiência do usuário e facilita o processo de manutenção do site.
 
-#### Vantagens do CSS
+## Vantagens do CSS
 - **Separação de Conteúdo e Estilo**: Com CSS, o conteúdo HTML fica mais organizado e sem estilos embutidos, permitindo que a apresentação da página seja gerida em arquivos externos.
 - **Reutilização de Código**: As regras CSS podem ser aplicadas a múltiplos elementos e páginas, economizando tempo e esforço.
 - **Manutenção Facilitada**: Alterar o estilo em um único arquivo CSS reflete automaticamente em todas as páginas que o utilizam.
 - **Compatibilidade com Diferentes Dispositivos**: Com CSS, é possível criar páginas responsivas, adaptáveis a diferentes resoluções e tamanhos de tela.
 
-#### Sintaxe Básica do CSS
+## Sintaxe Básica do CSS
 A estrutura de uma regra CSS é composta por um **seletor**, uma **propriedade** e um **valor**.
 
 ```css
@@ -33,7 +35,7 @@ p {
 ```
 No exemplo acima, todas as tags `<p>` no HTML terão texto na cor azul e tamanho de fonte 16 pixels.
 
-#### Formas de Incluir CSS
+## Formas de Incluir CSS
 O CSS pode ser inserido de três maneiras em um documento HTML: **inline**, **interno** e **externo**.
 
 1. **CSS Inline**:
@@ -71,82 +73,4 @@ O CSS pode ser inserido de três maneiras em um documento HTML: **inline**, **in
        color: blue;
        font-size: 16px;
    }
-   ```
-
-#### Cascata e Especificidade
-CSS significa **Cascading Style Sheets** (Folhas de Estilo em Cascata), e o termo "cascata" refere-se a como o navegador decide qual regra aplicar em situações onde múltiplas regras podem se sobrepor. As regras seguem uma hierarquia baseada na **especificidade** dos seletores:
-
-1. **Estilo Inline**: Tem a maior prioridade.
-2. **ID**: Seletores de ID (`#id`) têm mais prioridade do que classes e tags.
-3. **Classes e Pseudo-Classes**: Seletores de classe (`.classe`) e pseudo-classes (`:hover`, por exemplo) possuem prioridade inferior ao ID.
-4. **Elementos**: Seletores de elemento (`p`, `h1`, etc.) têm a prioridade mais baixa.
-
-**Exemplo de Cascata e Especificidade**:
-```html
-<style>
-    p {
-        color: black;
-    }
-    .highlight {
-        color: red;
-    }
-    #special {
-        color: green;
-    }
-</style>
-
-<p id="special" class="highlight">Texto de exemplo</p>
-```
-
-Nesse exemplo:
-- A regra do ID (`#special`) tem prioridade sobre a classe `.highlight` e o seletor de elemento `p`.
-- O texto será exibido em verde, pois o ID tem maior especificidade.
-
-#### Unidades CSS
-CSS oferece várias unidades para definir tamanhos, incluindo:
-- **px**: Pixels (medida fixa).
-- **em** e **rem**: Medidas relativas ao tamanho da fonte do elemento pai (`em`) ou da raiz (`rem`).
-- **%**: Percentual, útil para layouts responsivos.
-
-Exemplo:
-```css
-h1 {
-    font-size: 2em; /* duas vezes o tamanho da fonte do elemento pai */
-}
-```
-
-#### Seletores Comuns
-1. **Seletor de Elemento**: Aplica estilos a todas as instâncias de um elemento HTML específico.
-   ```css
-   h1 {
-       color: blue;
-   }
-   ```
-
-2. **Seletor de Classe**: Aplica estilos a elementos com uma classe específica.
-   ```css
-   .titulo {
-       font-size: 24px;
-       color: red;
-   }
-   ```
-
-3. **Seletor de ID**: Aplica estilos a um elemento com um ID específico.
-   ```css
-   #principal {
-       background-color: yellow;
-   }
-   ```
-
-#### CSS Responsivo
-O CSS também oferece recursos para a criação de layouts responsivos, que se ajustam automaticamente a diferentes tamanhos de tela. Um dos principais métodos para isso são as **Media Queries**.
-
-Exemplo de Media Query:
-```css
-@media (max-width: 600px) {
-    body {
-        font-size: 14px;
-    }
-}
-```
-Neste exemplo, quando a largura da tela for menor que 600px, o tamanho da fonte será ajustado para 14px.
\ No newline at end of file
+   ```
\ No newline at end of file

From e42dca804497f47f5e30ec23d9d9389bd83c99e2 Mon Sep 17 00:00:00 2001
From: Roberta Azambuja <robertaazambuja01@gmail.com>
Date: Tue, 14 Oct 2025 15:09:10 -0300
Subject: [PATCH 02/13] =?UTF-8?q?Conte=C3=BAdos=20sobre=20seletores?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dia-01/02-seletores-basicos/01-conteudo.md    | 106 +++++++++++++++
 dia-01/03-seletores-combinados/01-conteudo.md | 126 ++++++++++++++++++
 2 files changed, 232 insertions(+)
 create mode 100644 dia-01/02-seletores-basicos/01-conteudo.md
 create mode 100644 dia-01/03-seletores-combinados/01-conteudo.md

diff --git a/dia-01/02-seletores-basicos/01-conteudo.md b/dia-01/02-seletores-basicos/01-conteudo.md
new file mode 100644
index 0000000..899f20c
--- /dev/null
+++ b/dia-01/02-seletores-basicos/01-conteudo.md
@@ -0,0 +1,106 @@
+# Seletores Básicos no CSS
+
+No CSS, utilizamos **seletores** para escolher quais elementos serão estilizados. Eles permitem aplicar estilos de forma precisa a partes específicas do conteúdo, e cada tipo de seletor permite um nível diferente de customização.
+
+---
+
+## 1. **Seletores de Elemento**
+   Os seletores de elemento aplicam estilos a todas as instâncias de um elemento HTML específico.
+
+   - **Sintaxe**:
+     ```css
+     elemento {
+         propriedade: valor;
+     }
+     ```
+
+   - **Exemplo**:
+     ```css
+     p {
+         color: black;
+         font-size: 16px;
+     }
+     ```
+     Esse código aplica um estilo a todos os parágrafos `<p>` da página, definindo a cor do texto como preto e o tamanho da fonte como 16px.
+
+
+## 2. **Seletores de Classe**
+   Os seletores de classe são utilizados para aplicar estilos a um ou mais elementos que possuam a mesma classe. Para selecionar uma classe no CSS, usa-se o ponto (`.`) seguido do nome da classe.
+
+   - **Sintaxe**:
+     ```css
+     .nome-da-classe {
+         propriedade: valor;
+     }
+     ```
+
+   - **Exemplo**:
+     ```css
+     .destaque {
+         color: blue;
+         font-weight: bold;
+     }
+     ```
+
+     ```html
+     <p class="destaque">Este texto será azul e em negrito.</p>
+     <span class="destaque">Este texto também será azul e em negrito.</span>
+     ```
+     No exemplo acima, qualquer elemento com a classe `destaque` terá o texto azul e em negrito.
+
+
+## 3. **Seletores de ID**
+   O seletor de ID é usado para aplicar estilos a um elemento específico. IDs são únicos, ou seja, cada ID deve ser usado apenas uma vez por página. Para declarar um ID, usa-se o símbolo `#` seguido do nome do ID no CSS.
+
+   - **Sintaxe**:
+     ```css
+     #nome-do-id {
+         propriedade: valor;
+     }
+     ```
+
+   - **Exemplo**:
+     ```css
+     #principal {
+         background-color: lightgrey;
+         padding: 20px;
+     }
+     ```
+
+     ```html
+     <div id="principal">Este é o conteúdo principal da página.</div>
+     ```
+     Esse estilo será aplicado apenas ao elemento com o ID `principal`.
+
+---
+
+
+### Quando Usar IDs vs. Classes
+
+| Critério                        | ID                                         | Classe                                  |
+|---------------------------------|--------------------------------------------|-----------------------------------------|
+| **Aplicação**                   | Elemento único                             | Múltiplos elementos                     |
+| **Especificidade**              | Alta                                       | Moderada                                |
+| **Reutilização**                | Não deve ser reutilizado                   | Pode ser reutilizado                    |
+| **Exemplo de Uso**              | Estilos exclusivos de um elemento específico, como um cabeçalho único | Estilos aplicáveis a vários itens, como botões de formulário |
+
+---
+
+## 4. **Seletores de Atributo**
+Os **seletores de atributo** são um tipo poderoso de seletor no CSS que permitem aplicar estilos a elementos HTML com base em atributos específicos, como `type`, `href`, `title`, entre outros. Esses seletores são especialmente úteis quando se deseja estilizar campos de formulários, links, ou qualquer elemento que possua atributos específicos, sem precisar adicionar classes ou IDs adicionais.
+
+   - **Sintaxe**:
+     ```css
+     elemento[atributo="valor"] {
+         propriedade: valor;
+     }
+     ```
+
+   - **Exemplo**:
+     ```css
+     input[type="text"] {
+         border: 1px solid black;
+         padding: 5px;
+     }
+     ```
+     Esse estilo será aplicado a todos os campos de entrada (`<input>`) do tipo `text`.
\ No newline at end of file
diff --git a/dia-01/03-seletores-combinados/01-conteudo.md b/dia-01/03-seletores-combinados/01-conteudo.md
new file mode 100644
index 0000000..27b6c7f
--- /dev/null
+++ b/dia-01/03-seletores-combinados/01-conteudo.md
@@ -0,0 +1,126 @@
+# Seletores Combinados e Agrupados
+
+Agora que você já conhece os **seletores básicos** do CSS (elemento, classe e ID), chegou o momento de aprender como combiná-los para criar estilos mais precisos e eficientes.  
+Essas combinações permitem selecionar elementos com base em **relações hierárquicas**, **múltiplas condições** ou **agrupamentos**, tornando o código mais limpo e poderoso.
+
+---
+
+## 1. **Seletores de Grupo**
+Os **seletores de grupo** permitem aplicar o mesmo conjunto de estilos a múltiplos elementos HTML ao mesmo tempo. Isso não apenas reduz a repetição de código, mas também facilita a manutenção do CSS. Os seletores de grupo são separados por vírgulas e funcionam de forma similar a selecionar um único elemento, mas abrangem vários elementos simultaneamente.
+- **Sintaxe**
+    ```css
+    seletor1, seletor2, seletor3 {
+        propriedade: valor;
+    }
+    ```
+
+- **Exemplo**
+    ```css
+    h1, h2, h3 {
+        color: purple;
+        font-family: Arial, sans-serif;
+    }
+    ```
+Neste exemplo, todos os elementos `<h1>`, `<h2>`, e `<h3>` terão a cor do texto roxa e a fonte Arial. Se um desses elementos for alterado no futuro, a alteração será refletida em todos os elementos agrupados, facilitando a manutenção.
+
+## 2. **Seletores Combinados**
+Combinadores são usados para aplicar estilos baseados na relação entre elementos. Os principais combinadores incluem **descendentes**, **filhos**, **irmãos adjacentes**, e **irmãos gerais**.
+
+### 2.1 **Seletor Descendente (` `)**: 
+Estiliza elementos que são descendentes (não necessariamente filhos diretos) de um elemento pai específico. Ele aplica estilos a qualquer elemento que esteja dentro de um contêiner maior, independentemente da profundidade.
+
+- **Sintaxe**:
+
+    ```css
+    pai elemento {
+        propriedade: valor;
+    }
+    ```
+
+- **Exemplo**:
+    ```css
+    div p {
+        color: blue;
+    }
+    ```
+    Neste exemplo, todos os parágrafos (`<p>`) dentro de qualquer `div` terão o texto na cor azul, não importa quantos níveis de aninhamento existam entre eles.
+
+
+
+### 2.2 **Seletor de Filho Direto (`>`)**: 
+Seleciona apenas filhos diretos de um elemento.
+
+- **Sintaxe**:
+    ```css
+    pai > filho {
+        propriedade: valor;
+    }
+    ```
+
+- **Exemplo**:
+    ```css
+    div > p {
+        color: red;
+    }
+    ```
+    Neste exemplo, apenas os `<p>` que são filhos diretos de uma `<div>` terão o texto em vermelho.
+
+
+### 2.3 **Seletor de Irmão Adjacente (`+`)**: 
+O seletor adjacente aplica estilos ao primeiro elemento que aparece imediatamente após outro elemento. Esse seletor é útil quando você quer estilizar elementos que seguem imediatamente outro.
+
+- **Sintaxe**:
+    ```css
+    elemento1 + elemento2 {
+        propriedade: valor;
+    }
+    ```
+
+- **Exemplo**:
+    ```css
+    h1 + p {
+        color: green;
+    }
+    ```
+    Neste caso, o parágrafo (`<p>`) que aparece imediatamente após um `<h1>` terá o texto na cor verde.
+
+### 2.4 **Seletor de Irmãos Gerais (`~`)**: 
+O seletor de irmãos gerais estiliza todos os elementos que aparecem após um elemento específico, desde que sejam "irmãos" no mesmo nível hierárquico do DOM.
+
+- **Sintaxe**:
+    ```css
+    elemento1 ~ elemento2 {
+        propriedade: valor;
+    }
+    ```
+
+- **Exemplo**:
+    ```css
+    h1 ~ p {
+        color: purple;
+    }
+    ```
+    Neste exemplo, todos os parágrafos (`<p>`) que aparecem após um `<h1>`, no mesmo nível hierárquico, terão o texto em roxo.
+
+## 3. Seletor Universal
+
+O seletor universal (`*`) aplica estilos **a todos os elementos** de um documento.  
+Ele é útil para **resetar ou padronizar estilos** globais, porém é importante usá-lo com cautela, pois ele pode afetar a performance do seu site.
+
+- **Exemplo:**
+    ```css
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+    ```
+
+- Esse exemplo zera as margens e espaçamentos de todos os elementos, garantindo um comportamento mais previsível ao construir o layout.
+
+É comum usar o seletor universal em conjunto com outros seletores para limitar seu escopo. Por exemplo, você pode aplicar estilos a todos os elementos dentro de um contêiner específico:
+
+```css
+.container * {
+    font-family: Arial, sans-serif; /* Aplica a fonte apenas aos elementos dentro da classe .container */
+}

From db6654810424dd77ad9eaedec9f3e2aa3f9271e5 Mon Sep 17 00:00:00 2001
From: Roberta Azambuja <robertaazambuja01@gmail.com>
Date: Wed, 15 Oct 2025 14:23:35 -0300
Subject: [PATCH 03/13] Removendo aulas antigas

---
 dia-01/02-seletores/01-conteudo.md            | 223 -------------
 dia-01/03-seletores-id/01-conteudo.md         | 134 --------
 dia-01/04-seletores-atributos/01-conteudo.md  | 187 -----------
 dia-01/05-seletores-combinados/01-conteudo.md | 205 ------------
 dia-01/06-pseudo-classes/01-conteudo.md       | 277 ----------------
 dia-01/07-pseudo-elementos/01-conteudo.md     | 251 --------------
 dia-01/08-seletores-universais/01-conteudo.md | 117 -------
 dia-01/09-seletores-grupo/01-conteudo.md      |  53 ---
 dia-01/10-especificidade/01-conteudo.md       | 116 -------
 dia-01/10-especificidade/02-exercicios.md     |  53 ---
 .../03-exercicio1-corrigido.md                | 308 ------------------
 11 files changed, 1924 deletions(-)
 delete mode 100644 dia-01/02-seletores/01-conteudo.md
 delete mode 100644 dia-01/03-seletores-id/01-conteudo.md
 delete mode 100644 dia-01/04-seletores-atributos/01-conteudo.md
 delete mode 100644 dia-01/05-seletores-combinados/01-conteudo.md
 delete mode 100644 dia-01/06-pseudo-classes/01-conteudo.md
 delete mode 100644 dia-01/07-pseudo-elementos/01-conteudo.md
 delete mode 100644 dia-01/08-seletores-universais/01-conteudo.md
 delete mode 100644 dia-01/09-seletores-grupo/01-conteudo.md
 delete mode 100644 dia-01/10-especificidade/01-conteudo.md
 delete mode 100644 dia-01/10-especificidade/02-exercicios.md
 delete mode 100644 dia-01/10-especificidade/03-exercicio1-corrigido.md

diff --git a/dia-01/02-seletores/01-conteudo.md b/dia-01/02-seletores/01-conteudo.md
deleted file mode 100644
index 7663bf7..0000000
--- a/dia-01/02-seletores/01-conteudo.md
+++ /dev/null
@@ -1,223 +0,0 @@
-### Seletores CSS
-
-No CSS, **seletores** são utilizados para identificar os elementos HTML aos quais queremos aplicar estilos específicos. Esses seletores são essenciais para controlar o design e a aparência de uma página de maneira precisa, e cada tipo de seletor permite um nível de customização diferente. Vamos explorar os principais seletores CSS, com definições, exemplos, e práticas recomendadas.
-
----
-
-#### 1. **Seletores de Elemento**
-   Os seletores de elemento aplicam estilos a todas as instâncias de um elemento HTML específico.
-
-   - **Sintaxe**:
-     ```css
-     elemento {
-         propriedade: valor;
-     }
-     ```
-
-   - **Exemplo**:
-     ```css
-     p {
-         color: black;
-         font-size: 16px;
-     }
-     ```
-     Esse código aplica um estilo a todos os parágrafos `<p>` da página, definindo a cor do texto como preto e o tamanho da fonte como 16px.
-
----
-
-#### 2. **Seletores de Classe**
-   Os seletores de classe são utilizados para aplicar estilos a um ou mais elementos que possuam a mesma classe. Para declarar uma classe, usa-se o ponto (`.`) seguido do nome da classe no CSS.
-
-   - **Sintaxe**:
-     ```css
-     .nome-da-classe {
-         propriedade: valor;
-     }
-     ```
-
-   - **Exemplo**:
-     ```css
-     .destaque {
-         color: blue;
-         font-weight: bold;
-     }
-     ```
-
-     ```html
-     <p class="destaque">Este texto será azul e em negrito.</p>
-     <span class="destaque">Este texto também será azul e em negrito.</span>
-     ```
-     No exemplo acima, qualquer elemento com a classe `destaque` terá o texto azul e em negrito.
-
----
-
-#### 3. **Seletores de ID**
-   O seletor de ID é usado para aplicar estilos a um elemento específico. IDs são únicos, ou seja, cada ID deve ser usado apenas uma vez por página. Para declarar um ID, usa-se o símbolo `#` seguido do nome do ID no CSS.
-
-   - **Sintaxe**:
-     ```css
-     #nome-do-id {
-         propriedade: valor;
-     }
-     ```
-
-   - **Exemplo**:
-     ```css
-     #principal {
-         background-color: lightgrey;
-         padding: 20px;
-     }
-     ```
-
-     ```html
-     <div id="principal">Este é o conteúdo principal da página.</div>
-     ```
-     Esse estilo será aplicado apenas ao elemento com o ID `principal`.
-
----
-
-#### 4. **Seletores de Atributo**
-   Os seletores de atributo permitem aplicar estilos a elementos que possuem um atributo específico. Eles são especialmente úteis para estilizar elementos como links e campos de formulário.
-
-   - **Sintaxe**:
-     ```css
-     elemento[atributo="valor"] {
-         propriedade: valor;
-     }
-     ```
-
-   - **Exemplo**:
-     ```css
-     input[type="text"] {
-         border: 1px solid black;
-         padding: 5px;
-     }
-     ```
-     Esse estilo será aplicado a todos os campos de entrada (`<input>`) do tipo `text`.
-
----
-
-#### 5. **Seletores Combinados**
-   Combinadores são usados para aplicar estilos baseados na relação entre elementos. Os principais combinadores incluem **descendentes**, **filhos**, **irmãos adjacentes**, e **irmãos gerais**.
-
-   - **Seletor Descendente**: Seleciona elementos descendentes de outro elemento.
-
-     ```css
-     div p {
-         color: grey;
-     }
-     ```
-
-   - **Seletor de Filho Direto**: Seleciona apenas filhos diretos de um elemento.
-
-     ```css
-     div > p {
-         color: blue;
-     }
-     ```
-
-   - **Seletor de Irmão Adjacente**: Seleciona o elemento imediatamente após um outro elemento.
-
-     ```css
-     h1 + p {
-         font-size: 18px;
-     }
-     ```
-
-   - **Seletor de Irmãos Gerais**: Seleciona todos os elementos que são irmãos de um elemento.
-
-     ```css
-     h1 ~ p {
-         color: red;
-     }
-     ```
-
----
-
-#### 6. **Pseudo-classes**
-   As pseudo-classes permitem aplicar estilos baseados no estado de um elemento, como o hover de um botão ou o foco de um campo de formulário.
-
-   - **Exemplo**:
-     ```css
-     a:hover {
-         color: red;
-     }
-     input:focus {
-         border-color: blue;
-     }
-     ```
-
-     No exemplo, o link muda para vermelho ao passar o mouse, e a borda do campo de entrada muda para azul quando ele está em foco.
-
----
-
-#### 7. **Pseudo-elementos**
-   Pseudo-elementos permitem estilizar uma parte específica de um elemento. Os principais pseudo-elementos incluem `::before`, `::after`, `::first-line`, e `::first-letter`.
-
-   - **Exemplo**:
-     ```css
-     p::first-line {
-         font-weight: bold;
-     }
-     p::before {
-         content: "Nota: ";
-         font-weight: bold;
-     }
-     ```
-     Aqui, a primeira linha de cada parágrafo estará em negrito, e o texto "Nota:" será inserido antes do conteúdo de cada `<p>`.
-
----
-
-#### 8. **Seletores Universais**
-   O seletor universal (`*`) aplica estilos a todos os elementos da página. É útil para resetar margens e paddings.
-
-   - **Exemplo**:
-     ```css
-     * {
-         margin: 0;
-         padding: 0;
-         box-sizing: border-box;
-     }
-     ```
-     Isso define margens e paddings como zero para todos os elementos, útil ao aplicar um reset de CSS.
-
----
-
-#### 9. **Seletores de Grupo**
-   Os seletores de grupo aplicam o mesmo estilo a vários elementos, separados por vírgulas.
-
-   - **Exemplo**:
-     ```css
-     h1, h2, h3 {
-         color: purple;
-         font-family: Arial, sans-serif;
-     }
-     ```
-
----
-
-#### 10. **Especificidade e Importância**
-   No CSS, **especificidade** e a **importância** determinam a prioridade dos estilos aplicados.
-
-   - **Ordem de Especificidade**:
-     1. Estilos inline têm a maior prioridade.
-     2. IDs têm mais prioridade que classes.
-     3. Classes, pseudo-classes, e atributos têm prioridade inferior aos IDs.
-     4. Seletores de elementos têm a menor prioridade.
-
-   - **Exemplo de Especificidade**:
-     ```css
-     /* Prioridade baixa */
-     p { color: black; }
-
-     /* Prioridade maior que o seletor de elemento */
-     .texto { color: blue; }
-
-     /* Prioridade maior que o seletor de classe */
-     #principal { color: green; }
-
-     /* Texto ficará verde pois o ID tem maior especificidade */
-     <p id="principal" class="texto">Texto</p>
-     ```
-
----
\ No newline at end of file
diff --git a/dia-01/03-seletores-id/01-conteudo.md b/dia-01/03-seletores-id/01-conteudo.md
deleted file mode 100644
index c722ab5..0000000
--- a/dia-01/03-seletores-id/01-conteudo.md
+++ /dev/null
@@ -1,134 +0,0 @@
-### Seletores de ID no CSS
-
-O **seletor de ID** é uma forma poderosa e específica de aplicar estilos a um elemento HTML único em uma página. Como os IDs devem ser únicos, ou seja, um mesmo ID não deve ser atribuído a mais de um elemento por página, ele é ideal para estilizar elementos únicos e conferir a eles uma alta prioridade de estilização.
-
----
-
-#### Como Funciona o Seletor de ID
-No CSS, para definir o estilo de um elemento com ID, usamos o símbolo `#` seguido do nome do ID. Este seletor permite uma estilização precisa e, por conta de sua alta especificidade, tem prioridade sobre seletores de elementos e de classes.
-
-**Sintaxe**:
-```css
-#nomeDoID {
-    propriedade: valor;
-}
-```
-
-**Exemplo**:
-```css
-#header {
-    background-color: #333;
-    color: white;
-    padding: 20px;
-    text-align: center;
-}
-```
-
-Aqui, qualquer elemento HTML que tenha o ID `header` receberá um fundo escuro, texto em branco, padding de 20px e centralização de texto.
-
-No HTML, o ID é atribuído diretamente ao elemento com o atributo `id`:
-```html
-<div id="header">Bem-vindo ao Meu Site</div>
-```
-
----
-
-#### Exemplos Práticos
-
-1. **Estilizando um Cabeçalho Único**:
-   ```css
-   #cabecalho {
-       background-color: blue;
-       padding: 10px;
-       font-size: 24px;
-       color: white;
-   }
-   ```
-   ```html
-   <header id="cabecalho">
-       <h1>Meu Website</h1>
-   </header>
-   ```
-
-2. **Aplicando Estilo em Botão Específico**:
-   ```css
-   #botaoEnviar {
-       background-color: green;
-       color: white;
-       border: none;
-       padding: 10px 20px;
-       cursor: pointer;
-   }
-   ```
-   ```html
-   <button id="botaoEnviar">Enviar</button>
-   ```
-
----
-
-#### Especificidade do Seletor de ID
-
-O CSS atribui uma **alta especificidade** ao seletor de ID, fazendo com que ele tenha mais prioridade que seletores de classes ou de elementos. Quando há conflitos de estilos entre diferentes seletores, o seletor de ID tem preferência. Esse comportamento torna-o uma boa escolha para elementos que necessitam de um estilo específico e fixo.
-
-**Exemplo de Conflito de Estilos**:
-```css
-/* Estilo genérico de elemento */
-p {
-    color: blue;
-}
-
-/* Classe aplicável a vários elementos */
-.important {
-    color: red;
-}
-
-/* ID com prioridade mais alta */
-#destaque {
-    color: green;
-}
-```
-
-```html
-<p id="destaque" class="important">Texto em destaque</p>
-```
-
-Nesse caso, o texto do parágrafo será verde, pois o seletor de ID `#destaque` tem mais especificidade que o seletor de classe `.important` e o seletor de elemento `p`.
-
----
-
-#### Boas Práticas com o Seletor de ID
-
-- **Evite o Uso Excessivo de IDs**: Utilize IDs apenas para elementos únicos. Quando você precisa aplicar estilos a múltiplos elementos, é preferível usar classes.
-- **Mantenha IDs Únicos**: IDs devem ser únicos em uma página. Reutilizar o mesmo ID em vários elementos pode gerar comportamentos inconsistentes, dificultando a depuração.
-- **Combine IDs com Outros Seletores para Precisão**: Quando precisar de ainda mais precisão, combine o seletor de ID com outros seletores (como pseudo-classes) para criar seletores complexos, se necessário.
-
----
-
-#### Exemplo Avançado: Seletores de ID Combinados
-
-Você pode combinar seletores de ID com outros para aplicar estilos ainda mais específicos. Isso pode ser útil para aplicar estilos a um elemento específico em um estado específico (por exemplo, hover).
-
-```css
-#menu:hover {
-    background-color: darkblue;
-}
-
-#menu li.active {
-    font-weight: bold;
-}
-```
-
-Neste exemplo, o ID `#menu` muda de cor ao passar o mouse, e o item da lista `<li>` com a classe `active` dentro do `#menu` será exibido em negrito.
-
----
-
-#### Quando Usar IDs vs. Classes
-
-| Critério                        | ID                                         | Classe                                  |
-|---------------------------------|--------------------------------------------|-----------------------------------------|
-| **Aplicação**                   | Elemento único                             | Múltiplos elementos                     |
-| **Especificidade**              | Alta                                       | Moderada                                |
-| **Reutilização**                | Não deve ser reutilizado                   | Pode ser reutilizado                    |
-| **Exemplo de Uso**              | Estilos exclusivos de um elemento específico, como um cabeçalho único | Estilos aplicáveis a vários itens, como botões de formulário |
-
----
\ No newline at end of file
diff --git a/dia-01/04-seletores-atributos/01-conteudo.md b/dia-01/04-seletores-atributos/01-conteudo.md
deleted file mode 100644
index e58a5a8..0000000
--- a/dia-01/04-seletores-atributos/01-conteudo.md
+++ /dev/null
@@ -1,187 +0,0 @@
-### Seletores de Atributo no CSS
-
-Os **seletores de atributo** são um tipo poderoso de seletor no CSS que permitem aplicar estilos a elementos HTML com base em atributos específicos, como `type`, `href`, `title`, entre outros. Esses seletores são especialmente úteis quando se deseja estilizar campos de formulários, links, ou qualquer elemento que possua atributos específicos, sem precisar adicionar classes ou IDs adicionais.
-
----
-
-#### Como Funcionam os Seletores de Atributo
-
-No CSS, os seletores de atributo são definidos entre colchetes (`[]`). Eles podem selecionar elementos que possuem um atributo específico ou valores de atributo específicos. Os seletores de atributo têm várias variações para permitir um controle mais detalhado sobre os elementos a serem estilizados.
-
-**Sintaxe Básica**:
-```css
-elemento[atributo] {
-    propriedade: valor;
-}
-```
-
-**Exemplo**:
-```css
-a[target] {
-    color: blue;
-}
-```
-Esse seletor aplica um estilo a todos os links `<a>` que possuem o atributo `target`.
-
----
-
-#### Tipos de Seletores de Atributo
-
-1. **Seletor de Atributo Simples**
-   - Seleciona elementos que possuem um atributo específico, independentemente do valor.
-   - **Exemplo**:
-     ```css
-     input[required] {
-         border: 2px solid red;
-     }
-     ```
-     Esse código aplica uma borda vermelha a todos os campos de entrada (`<input>`) que possuem o atributo `required`.
-
----
-
-2. **Seletor de Atributo com Valor Específico**
-   - Seleciona elementos onde o atributo possui exatamente o valor especificado.
-   - **Exemplo**:
-     ```css
-     input[type="text"] {
-         background-color: lightyellow;
-     }
-     ```
-     Aqui, apenas os campos de entrada do tipo `text` terão um fundo amarelo claro.
-
----
-
-3. **Seletor de Atributo que Contém uma Palavra**
-   - Seleciona elementos onde o atributo contém uma palavra específica. Usa o operador `~=`.
-   - **Exemplo**:
-     ```css
-     [title~="importante"] {
-         color: red;
-     }
-     ```
-     Esse seletor aplica a cor vermelha ao texto de elementos que contêm a palavra "importante" no atributo `title`, mesmo que o atributo `title` tenha outras palavras, como `title="muito importante"`.
-
----
-
-4. **Seletor de Atributo que Começa com um Valor Específico**
-   - Seleciona elementos onde o valor do atributo começa com um valor específico. Usa o operador `^=`.
-   - **Exemplo**:
-     ```css
-     a[href^="https"] {
-         font-weight: bold;
-     }
-     ```
-     Esse estilo aplica negrito aos links que começam com `https`, indicando links seguros.
-
----
-
-5. **Seletor de Atributo que Termina com um Valor Específico**
-   - Seleciona elementos onde o valor do atributo termina com um valor específico. Usa o operador `$=`.
-   - **Exemplo**:
-     ```css
-     img[src$=".jpg"] {
-         border: 1px solid black;
-     }
-     ```
-     Esse seletor aplica uma borda a todas as imagens com o atributo `src` terminando em `.jpg`.
-
----
-
-6. **Seletor de Atributo que Contém um Valor Específico**
-   - Seleciona elementos onde o valor do atributo contém uma sequência específica de caracteres. Usa o operador `*=`.
-   - **Exemplo**:
-     ```css
-     a[href*="example"] {
-         color: green;
-     }
-     ```
-     Esse estilo aplica a cor verde a todos os links (`<a>`) que contêm a palavra `example` no `href`, como `https://example.com`.
-
----
-
-#### Exemplo Completo: Estilizando um Formulário com Seletores de Atributo
-
-Com os seletores de atributo, podemos aplicar estilos diferenciados a um formulário de maneira específica e organizada.
-
-```css
-input[type="text"] {
-    border: 1px solid blue;
-    padding: 5px;
-    margin-bottom: 10px;
-}
-
-input[type="email"] {
-    border: 1px solid green;
-    padding: 5px;
-    margin-bottom: 10px;
-}
-
-input[type="password"] {
-    border: 1px solid red;
-    padding: 5px;
-    margin-bottom: 10px;
-}
-
-input[required] {
-    background-color: #f9f9f9;
-}
-
-button[type="submit"] {
-    background-color: darkblue;
-    color: white;
-    padding: 10px 20px;
-    border: none;
-    cursor: pointer;
-}
-```
-
-**HTML**:
-```html
-<form>
-    <input type="text" required placeholder="Nome">
-    <input type="email" required placeholder="Email">
-    <input type="password" required placeholder="Senha">
-    <button type="submit">Enviar</button>
-</form>
-```
-
-Neste exemplo, cada campo recebe um estilo específico com base em seu `type` e, adicionalmente, o estilo para campos `required` destaca os campos obrigatórios com um fundo cinza claro.
-
----
-
-#### Especificidade dos Seletores de Atributo
-
-Os seletores de atributo têm a mesma especificidade que seletores de classes. Isso significa que eles têm prioridade sobre seletores de elementos, mas são superados por seletores de ID. Esse comportamento pode ser útil ao combinar seletores de atributo com outros tipos de seletores para obter um controle mais preciso.
-
-**Exemplo de Especificidade**:
-```css
-/* Estilo genérico */
-button {
-    background-color: gray;
-}
-
-/* Mais específico que o seletor de elemento */
-button[type="submit"] {
-    background-color: blue;
-}
-```
-
-Aqui, o botão de envio (`button[type="submit"]`) terá o fundo azul, enquanto outros botões terão o fundo cinza.
-
----
-
-#### Boas Práticas com Seletores de Atributo
-
-- **Evite Usar Seletores Muito Complexos**: A complexidade dos seletores de atributo pode afetar o desempenho, especialmente em documentos grandes.
-- **Use Seletores de Atributo Quando Necessário**: Utilize seletores de atributo quando classes e IDs não forem suficientes ou para estilizar elementos específicos, como campos de formulário.
-- **Combinações com Outros Seletores**: É possível combinar seletores de atributo com classes, IDs e outros seletores para maior precisão.
-
-**Exemplo de Combinação**:
-```css
-input[type="text"].form-control {
-    font-size: 16px;
-    color: darkblue;
-}
-```
-
----
\ No newline at end of file
diff --git a/dia-01/05-seletores-combinados/01-conteudo.md b/dia-01/05-seletores-combinados/01-conteudo.md
deleted file mode 100644
index a60468b..0000000
--- a/dia-01/05-seletores-combinados/01-conteudo.md
+++ /dev/null
@@ -1,205 +0,0 @@
-### Seletores Combinados no CSS
-
-Os **seletores combinados** no CSS permitem aplicar estilos com base em combinações de seletores, o que possibilita uma maior precisão na estilização. Esses seletores são utilizados para definir regras que se aplicam a elementos que atendem a mais de um critério ao mesmo tempo, como um elemento com uma classe específica dentro de uma estrutura particular, ou um elemento adjacente a outro. Os seletores combinados oferecem um nível de controle avançado que é muito útil para criar layouts e estilos complexos.
-
----
-
-#### Tipos de Seletores Combinados
-
-Existem alguns tipos principais de seletores combinados no CSS: o **seletor descendente**, o **seletor filho**, o **seletor adjacente** e o **seletor de irmãos gerais**.
-
----
-
-### 1. Seletor Descendente (` `)
-
-O seletor descendente é utilizado para estilizar elementos que são descendentes (não necessariamente filhos diretos) de um elemento pai específico. Ele aplica estilos a qualquer elemento que esteja dentro de um contêiner maior, independentemente da profundidade.
-
-**Sintaxe**:
-```css
-pai elemento {
-    propriedade: valor;
-}
-```
-
-**Exemplo**:
-```css
-div p {
-    color: blue;
-}
-```
-Neste exemplo, todos os parágrafos (`<p>`) dentro de qualquer `div` terão o texto na cor azul, não importa quantos níveis de aninhamento existam entre eles.
-
-**HTML**:
-```html
-<div>
-    <p>Parágrafo dentro de div - ficará azul.</p>
-    <section>
-        <p>Outro parágrafo dentro de uma seção - também ficará azul.</p>
-    </section>
-</div>
-```
-
----
-
-### 2. Seletor Filho (`>`)
-
-O seletor filho aplica estilos apenas aos elementos que são filhos diretos de um contêiner, excluindo os descendentes em níveis mais profundos. Esse seletor é mais específico do que o seletor descendente.
-
-**Sintaxe**:
-```css
-pai > filho {
-    propriedade: valor;
-}
-```
-
-**Exemplo**:
-```css
-div > p {
-    color: red;
-}
-```
-Neste exemplo, apenas os `<p>` que são filhos diretos de uma `<div>` terão o texto em vermelho.
-
-**HTML**:
-```html
-<div>
-    <p>Filho direto - ficará vermelho.</p>
-    <section>
-        <p>Descendente, mas não filho direto - não será afetado.</p>
-    </section>
-</div>
-```
-
----
-
-### 3. Seletor Adjacente (`+`)
-
-O seletor adjacente aplica estilos ao primeiro elemento que aparece imediatamente após outro elemento. Esse seletor é útil quando você quer estilizar elementos que seguem imediatamente outro.
-
-**Sintaxe**:
-```css
-elemento1 + elemento2 {
-    propriedade: valor;
-}
-```
-
-**Exemplo**:
-```css
-h1 + p {
-    color: green;
-}
-```
-Neste caso, o parágrafo (`<p>`) que aparece imediatamente após um `<h1>` terá o texto na cor verde.
-
-**HTML**:
-```html
-<h1>Título</h1>
-<p>Este parágrafo ficará verde.</p>
-<p>Este parágrafo não será afetado.</p>
-```
-
----
-
-### 4. Seletor de Irmãos Gerais (`~`)
-
-O seletor de irmãos gerais estiliza todos os elementos que aparecem após um elemento específico, desde que sejam "irmãos" no mesmo nível hierárquico do DOM.
-
-**Sintaxe**:
-```css
-elemento1 ~ elemento2 {
-    propriedade: valor;
-}
-```
-
-**Exemplo**:
-```css
-h1 ~ p {
-    color: purple;
-}
-```
-Neste exemplo, todos os parágrafos (`<p>`) que aparecem após um `<h1>`, no mesmo nível hierárquico, terão o texto em roxo.
-
-**HTML**:
-```html
-<h1>Título</h1>
-<p>Primeiro parágrafo - ficará roxo.</p>
-<p>Segundo parágrafo - também ficará roxo.</p>
-<div>
-    <p>Parágrafo dentro de div - não será afetado.</p>
-</div>
-```
-
----
-
-#### Exemplos Práticos de Seletores Combinados
-
-1. **Estilizando Itens de Lista Aninhados**
-   ```css
-   ul.lista-principal li ul li {
-       color: orange;
-   }
-   ```
-   Neste exemplo, qualquer item de lista (`<li>`) dentro de uma lista secundária (`<ul>`) que está dentro de um item da `lista-principal` será laranja.
-
-   **HTML**:
-   ```html
-   <ul class="lista-principal">
-       <li>Item 1
-           <ul>
-               <li>Subitem 1</li>
-               <li>Subitem 2</li>
-           </ul>
-       </li>
-       <li>Item 2</li>
-   </ul>
-   ```
-
-2. **Estilizando Parágrafos Após uma Imagem**
-   ```css
-   img + p {
-       font-style: italic;
-       color: gray;
-   }
-   ```
-   Aqui, qualquer `<p>` imediatamente após uma `<img>` terá um estilo em itálico e cor cinza.
-
-   **HTML**:
-   ```html
-   <img src="imagem.jpg" alt="Imagem">
-   <p>Descrição da imagem.</p>
-   ```
-
----
-
-#### Combinação de Vários Seletores Combinados
-
-É possível combinar seletores combinados para obter um controle ainda maior. Por exemplo, podemos combinar o seletor de filhos diretos e o de irmãos gerais para estilizar elementos em contextos específicos.
-
-**Exemplo Avançado**:
-```css
-div > p + ul li {
-    font-weight: bold;
-}
-```
-Aqui, estamos aplicando negrito apenas aos itens de lista (`<li>`) que aparecem em uma lista (`<ul>`) imediatamente após um parágrafo (`<p>`) que é um filho direto de uma `<div>`.
-
-**HTML**:
-```html
-<div>
-    <p>Este é o parágrafo antes da lista.</p>
-    <ul>
-        <li>Item 1</li>
-        <li>Item 2</li>
-    </ul>
-</div>
-```
-
-Neste caso, os itens de lista (`<li>`) terão o texto em negrito.
-
----
-
-#### Especificidade dos Seletores Combinados
-
-Cada seletor combinado possui um nível de especificidade baseado nos elementos que ele combina. A especificidade é acumulada, então quanto mais específico for o seletor combinado, maior prioridade ele terá em relação a outros estilos. A ordem de precedência dos seletores de CSS ajuda a garantir que estilos específicos substituam estilos mais gerais.
-
----
diff --git a/dia-01/06-pseudo-classes/01-conteudo.md b/dia-01/06-pseudo-classes/01-conteudo.md
deleted file mode 100644
index 936f951..0000000
--- a/dia-01/06-pseudo-classes/01-conteudo.md
+++ /dev/null
@@ -1,277 +0,0 @@
-### Pseudo-classes no CSS
-
-As **pseudo-classes** no CSS são uma forma avançada de aplicar estilos com base no estado de um elemento ou na posição dele em relação a outros elementos, sem a necessidade de adicionar classes ou alterar o HTML. Elas são úteis para criar interações dinâmicas e personalizadas, como mudar a cor de um link ao passar o mouse sobre ele, estilizar o primeiro elemento de uma lista ou definir estilos para formulários com campos inválidos.
-
----
-
-#### O Que São Pseudo-classes?
-
-Uma pseudo-classe é precedida por dois pontos (`:`) e é adicionada ao seletor do elemento ao qual queremos aplicar o estilo, baseado em um estado específico.
-
-**Sintaxe**:
-```css
-elemento:pseudo-classe {
-    propriedade: valor;
-}
-```
-
----
-
-#### Tipos de Pseudo-classes Comuns
-
-As pseudo-classes estão divididas em diferentes categorias, dependendo do tipo de estado ou condição que representam. Vamos explorar as pseudo-classes mais utilizadas e como aplicá-las.
-
----
-
-### 1. Pseudo-classes de Interatividade com o Usuário
-
-Essas pseudo-classes são utilizadas para aplicar estilos a elementos que reagem a interações do usuário, como `hover`, `focus`, e `active`.
-
-- **`:hover`**: Estiliza um elemento quando o mouse passa sobre ele.
-  
-  **Exemplo**:
-  ```css
-  button:hover {
-      background-color: blue;
-      color: white;
-  }
-  ```
-
-  Neste caso, ao passar o mouse sobre um botão (`<button>`), ele muda para fundo azul e texto branco.
-
-- **`:focus`**: Aplica estilo a um elemento que está em foco, como um campo de entrada de formulário ao receber o cursor.
-
-  **Exemplo**:
-  ```css
-  input:focus {
-      border: 2px solid green;
-  }
-  ```
-
-  Aqui, qualquer campo de entrada (`<input>`) em foco terá uma borda verde.
-
-- **`:active`**: Aplica estilo a um elemento enquanto ele está sendo clicado, como um botão.
-
-  **Exemplo**:
-  ```css
-  a:active {
-      color: red;
-  }
-  ```
-
-  Neste caso, o link (`<a>`) mudará para vermelho enquanto estiver sendo clicado.
-
----
-
-### 2. Pseudo-classes Estruturais
-
-As pseudo-classes estruturais permitem selecionar elementos com base na estrutura do DOM, como `:first-child`, `:last-child`, e `:nth-child()`.
-
-- **`:first-child`**: Estiliza o primeiro filho de um elemento pai.
-
-  **Exemplo**:
-  ```css
-  p:first-child {
-      font-weight: bold;
-  }
-  ```
-
-  Aqui, apenas o primeiro parágrafo (`<p>`) de um contêiner será exibido em negrito.
-
-- **`:last-child`**: Aplica estilo ao último filho de um elemento pai.
-
-  **Exemplo**:
-  ```css
-  p:last-child {
-      color: gray;
-  }
-  ```
-
-  Neste exemplo, o último parágrafo dentro de qualquer contêiner ficará cinza.
-
-- **`:nth-child(n)`**: Estiliza o enésimo filho de um elemento pai, onde `n` pode ser um número, palavra-chave, ou expressão.
-
-  **Exemplo**:
-  ```css
-  li:nth-child(2) {
-      color: blue;
-  }
-  ```
-
-  Aqui, o segundo item de cada lista (`<li>`) terá o texto em azul.
-
-- **`:nth-child(odd)` e `:nth-child(even)`**: Aplica estilos em elementos alternados. `odd` seleciona elementos em posições ímpares, e `even` seleciona os em posições pares.
-
-  **Exemplo**:
-  ```css
-  tr:nth-child(odd) {
-      background-color: #f2f2f2;
-  }
-  ```
-
-  Esse código aplica um fundo cinza claro a linhas ímpares de uma tabela.
-
----
-
-### 3. Pseudo-classes de Formulário
-
-As pseudo-classes de formulário ajudam a estilizar elementos de formulário com base em seus estados, como `:checked`, `:disabled`, e `:valid`.
-
-- **`:checked`**: Estiliza caixas de seleção (`<input type="checkbox">`) ou botões de rádio (`<input type="radio">`) que estão marcados.
-
-  **Exemplo**:
-  ```css
-  input[type="checkbox"]:checked {
-      border: 2px solid green;
-  }
-  ```
-
-  Aqui, qualquer caixa de seleção marcada terá uma borda verde.
-
-- **`:disabled`**: Aplica estilo a elementos de formulário que estão desativados.
-
-  **Exemplo**:
-  ```css
-  input:disabled {
-      background-color: #ddd;
-      color: #666;
-  }
-  ```
-
-  Este estilo altera a cor do fundo e do texto dos campos desativados para indicar que não estão disponíveis para edição.
-
-- **`:valid` e `:invalid`**: Aplica estilos com base na validade do conteúdo do campo. `:valid` se o valor estiver correto, e `:invalid` se o valor estiver incorreto (baseado nas restrições de validação do campo).
-
-  **Exemplo**:
-  ```css
-  input:valid {
-      border: 2px solid blue;
-  }
-  
-  input:invalid {
-      border: 2px solid red;
-  }
-  ```
-
-  Campos válidos terão uma borda azul, enquanto campos inválidos terão uma borda vermelha.
-
----
-
-### 4. Pseudo-classes de Links
-
-As pseudo-classes de link permitem aplicar estilos diferentes dependendo do estado do link, como `:link`, `:visited`, `:hover`, e `:active`.
-
-- **`:link`**: Estiliza links que ainda não foram visitados.
-
-  **Exemplo**:
-  ```css
-  a:link {
-      color: blue;
-  }
-  ```
-
-  Links ainda não visitados terão a cor azul.
-
-- **`:visited`**: Aplica estilo a links que já foram visitados.
-
-  **Exemplo**:
-  ```css
-  a:visited {
-      color: purple;
-  }
-  ```
-
-  Links já visitados pelo usuário aparecerão na cor roxa.
-
----
-
-### 5. Pseudo-classes de Negação (`:not()`)
-
-A pseudo-classe `:not()` permite selecionar todos os elementos que **não** correspondem a um seletor específico. Ela é útil para aplicar estilos de exceção.
-
-**Exemplo**:
-```css
-button:not(.primary) {
-    background-color: gray;
-}
-```
-
-Esse exemplo aplica um fundo cinza a todos os botões (`<button>`) que **não** têm a classe `primary`.
-
----
-
-### Exemplo Completo de Pseudo-classes em um Formulário
-
-Para ilustrar o uso de várias pseudo-classes, vamos criar um formulário com diferentes estilos para elementos em estados distintos.
-
-**CSS**:
-```css
-/* Estilizando links */
-a:link {
-    color: blue;
-}
-a:visited {
-    color: purple;
-}
-a:hover {
-    color: green;
-}
-a:active {
-    color: red;
-}
-
-/* Campos de formulário */
-input:focus {
-    border-color: orange;
-}
-
-input:invalid {
-    border-color: red;
-}
-
-input:valid {
-    border-color: green;
-}
-
-input:disabled {
-    background-color: #eee;
-}
-
-button:hover {
-    background-color: darkblue;
-    color: white;
-}
-
-/* Estilizando itens de lista alternados */
-li:nth-child(odd) {
-    background-color: #f9f9f9;
-}
-
-li:nth-child(even) {
-    background-color: #e9e9e9;
-}
-```
-
-**HTML**:
-```html
-<form>
-    <label for="nome">Nome:</label>
-    <input type="text" id="nome" required>
-
-    <label for="email">Email:</label>
-    <input type="email" id="email" required>
-
-    <label for="senha">Senha:</label>
-    <input type="password" id="senha" required>
-
-    <button type="submit">Enviar</button>
-</form>
-
-<ul>
-    <li>Item 1</li>
-    <li>Item 2</li>
-    <li>Item 3</li>
-</ul>
-```
-
----
\ No newline at end of file
diff --git a/dia-01/07-pseudo-elementos/01-conteudo.md b/dia-01/07-pseudo-elementos/01-conteudo.md
deleted file mode 100644
index 3b60687..0000000
--- a/dia-01/07-pseudo-elementos/01-conteudo.md
+++ /dev/null
@@ -1,251 +0,0 @@
-### Pseudo-elementos no CSS
-
-Os **pseudo-elementos** no CSS são utilizados para aplicar estilos a partes específicas de um elemento, sem a necessidade de alterar diretamente o HTML. Com pseudo-elementos, podemos adicionar ou estilizar conteúdos extras, como a primeira letra ou linha de um parágrafo, ou inserir conteúdo antes ou depois de um elemento. Eles são frequentemente usados em conjunto com pseudo-classes para criar efeitos visuais avançados e aprimorar a experiência do usuário.
-
----
-
-#### O Que São Pseudo-elementos?
-
-Pseudo-elementos começam com dois-pontos (`::`) e são adicionados ao seletor do elemento. Eles representam partes específicas de um elemento HTML, como o primeiro caractere ou a primeira linha de um parágrafo, ou permitem adicionar conteúdo virtual antes ou depois de um elemento.
-
-**Sintaxe**:
-```css
-elemento::pseudo-elemento {
-    propriedade: valor;
-}
-```
-
-No CSS3, recomenda-se o uso da sintaxe com `::`, mas navegadores ainda aceitam o formato com um único `:` por compatibilidade.
-
----
-
-#### Principais Pseudo-elementos no CSS
-
-Os pseudo-elementos mais comuns são `::before`, `::after`, `::first-line`, `::first-letter`, e `::selection`.
-
----
-
-### 1. Pseudo-elemento `::before`
-
-O `::before` é utilizado para inserir conteúdo antes do conteúdo principal de um elemento. Esse conteúdo é gerado virtualmente e pode ser estilizado de várias maneiras.
-
-**Exemplo**:
-```css
-h1::before {
-    content: "→ ";
-    color: blue;
-}
-```
-
-Aqui, o símbolo "→ " será inserido antes de cada título `<h1>` e terá a cor azul.
-
-**HTML**:
-```html
-<h1>Título da Seção</h1>
-```
-
-**Resultado**:
-```plaintext
-→ Título da Seção
-```
-
-> **Nota**: O uso da propriedade `content` é obrigatório com `::before` e `::after` para definir o conteúdo a ser exibido.
-
----
-
-### 2. Pseudo-elemento `::after`
-
-O `::after` insere conteúdo logo após o conteúdo principal de um elemento, permitindo adicionar elementos decorativos ou informações adicionais.
-
-**Exemplo**:
-```css
-h1::after {
-    content: " *";
-    color: red;
-}
-```
-
-Neste exemplo, um asterisco vermelho será adicionado depois do conteúdo de cada `<h1>`.
-
-**HTML**:
-```html
-<h1>Título Importante</h1>
-```
-
-**Resultado**:
-```plaintext
-Título Importante *
-```
-
-Esse pseudo-elemento é útil, por exemplo, para indicar campos obrigatórios em formulários ou adicionar ícones.
-
----
-
-### 3. Pseudo-elemento `::first-line`
-
-O `::first-line` aplica estilo apenas à primeira linha do texto dentro de um elemento, com base na largura da tela. Esse pseudo-elemento é ideal para destacar a primeira linha de um parágrafo.
-
-**Exemplo**:
-```css
-p::first-line {
-    font-weight: bold;
-    color: darkblue;
-}
-```
-
-Aqui, apenas a primeira linha de cada parágrafo (`<p>`) ficará em negrito e na cor azul escuro.
-
-**HTML**:
-```html
-<p>Este é um exemplo onde apenas a primeira linha terá um estilo diferente, destacando-se do restante do conteúdo.</p>
-```
-
----
-
-### 4. Pseudo-elemento `::first-letter`
-
-O `::first-letter` permite estilizar a primeira letra de um elemento de bloco. Ele é usado com frequência em tipografia para criar um efeito de "letra capitular" em parágrafos.
-
-**Exemplo**:
-```css
-p::first-letter {
-    font-size: 2em;
-    color: purple;
-    font-weight: bold;
-}
-```
-
-Neste caso, a primeira letra de cada parágrafo (`<p>`) ficará maior e em negrito com a cor roxa.
-
-**HTML**:
-```html
-<p>Exemplo de parágrafo onde apenas a primeira letra foi estilizada.</p>
-```
-
----
-
-### 5. Pseudo-elemento `::selection`
-
-O `::selection` estiliza a área do texto que o usuário seleciona com o mouse ou o teclado. Este pseudo-elemento permite mudar a cor do fundo e do texto selecionado.
-
-**Exemplo**:
-```css
-::selection {
-    background-color: yellow;
-    color: black;
-}
-```
-
-Aqui, qualquer parte do texto que o usuário selecionar ficará com fundo amarelo e texto preto.
-
-**HTML**:
-```html
-<p>Selecione este texto para ver o efeito do pseudo-elemento ::selection.</p>
-```
-
-> **Nota**: As propriedades aceitas pelo `::selection` são limitadas a `color`, `background-color`, e `text-shadow`.
-
----
-
-### Exemplos Práticos com Pseudo-elementos
-
-1. **Criando uma Citação Customizada com `::before` e `::after`**
-
-   Usando `::before` e `::after`, podemos simular uma citação:
-
-   ```css
-   blockquote::before {
-       content: "“";
-       font-size: 2em;
-       color: #999;
-   }
-
-   blockquote::after {
-       content: "”";
-       font-size: 2em;
-       color: #999;
-   }
-   ```
-
-   **HTML**:
-   ```html
-   <blockquote>O único limite para o nosso entendimento de amanhã são as nossas dúvidas de hoje.</blockquote>
-   ```
-
-   **Resultado**:
-   ```plaintext
-   “O único limite para o nosso entendimento de amanhã são as nossas dúvidas de hoje.”
-   ```
-
-2. **Indicando Campos Obrigatórios em Formulários**
-
-   Podemos usar `::after` para marcar visualmente os campos obrigatórios de um formulário:
-
-   ```css
-   label.required::after {
-       content: " *";
-       color: red;
-   }
-   ```
-
-   **HTML**:
-   ```html
-   <label class="required">Nome</label>
-   <input type="text" required>
-   ```
-
-3. **Personalizando Botões com `::before`**
-
-   ```css
-   button::before {
-       content: "→ ";
-       font-weight: bold;
-       color: #fff;
-   }
-
-   button {
-       background-color: #007bff;
-       color: white;
-       border: none;
-       padding: 10px 20px;
-       cursor: pointer;
-   }
-   ```
-
-   **HTML**:
-   ```html
-   <button>Enviar</button>
-   ```
-
-   O botão terá uma seta antes do texto "Enviar".
-
----
-
-#### Combinação de Pseudo-classes e Pseudo-elementos
-
-É possível combinar pseudo-classes com pseudo-elementos para aplicar estilos ainda mais dinâmicos.
-
-**Exemplo**: Destacando a primeira letra de um parágrafo em hover
-```css
-p:hover::first-letter {
-    color: orange;
-    font-size: 1.5em;
-}
-```
-
-Neste caso, a primeira letra do parágrafo ficará laranja e maior ao passar o mouse sobre ele.
-
-**HTML**:
-```html
-<p>Passe o mouse sobre este parágrafo para ver o efeito na primeira letra.</p>
-```
-
----
-
-### Boas Práticas com Pseudo-elementos
-
-1. **Use com Moderação**: Exagerar no uso de pseudo-elementos pode deixar o layout confuso. Eles devem ser utilizados para melhorar a legibilidade ou a experiência do usuário.
-2. **Documente Pseudo-elementos Complexos**: Em projetos de maior escala, documente pseudo-elementos que criem efeitos visuais específicos para facilitar a manutenção e evitar confusões.
-3. **Teste em Vários Navegadores**: Embora amplamente suportados, pseudo-elementos podem apresentar diferenças sutis de renderização entre navegadores.
-
----
\ No newline at end of file
diff --git a/dia-01/08-seletores-universais/01-conteudo.md b/dia-01/08-seletores-universais/01-conteudo.md
deleted file mode 100644
index 4575d3c..0000000
--- a/dia-01/08-seletores-universais/01-conteudo.md
+++ /dev/null
@@ -1,117 +0,0 @@
-### 8. Seletores Universais
-
-**Definição:**
-O seletor universal (`*`) é um tipo de seletor CSS que seleciona todos os elementos de um documento. Ele é útil quando você deseja aplicar um estilo a todos os elementos, independentemente de seu tipo ou classe.
-
-**Uso do Seletor Universal:**
-O seletor universal pode ser utilizado para redefinir estilos básicos ou para aplicar estilos gerais a todos os elementos de uma página. No entanto, é importante usá-lo com cautela, pois ele pode afetar a performance do seu site, especialmente em documentos grandes.
-
-**Exemplo de Uso:**
-
-```css
-/* Definindo uma margem e preenchimento padrão para todos os elementos */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box; /* Para incluir bordas e preenchimento na largura total do elemento */
-}
-```
-
-### Vantagens do Seletor Universal
-
-1. **Aplicação Global:**
-   - O seletor universal é útil para aplicar estilos globais, como reset de margens e preenchimentos, garantindo que todos os elementos comecem com o mesmo estilo básico.
-
-2. **Simplicidade:**
-   - Usar `*` é uma maneira rápida e fácil de aplicar uma regra a todos os elementos sem precisar especificar cada um deles.
-
-3. **Consistência:**
-   - Ajuda a manter a consistência do estilo em todo o documento.
-
-### Desvantagens do Seletor Universal
-
-1. **Performance:**
-   - O uso do seletor universal pode impactar a performance, especialmente em páginas com muitos elementos, pois o navegador precisa aplicar a regra a todos os elementos.
-
-2. **Especificidade:**
-   - O seletor universal possui baixa especificidade, o que pode causar conflitos com outras regras de estilo. Se você tiver estilos específicos para elementos, eles podem não ser aplicados conforme esperado.
-
-3. **Difícil de Gerenciar:**
-   - Ao usar o seletor universal indiscriminadamente, pode ser difícil gerenciar estilos, especialmente em projetos grandes e complexos, onde muitos elementos podem ser afetados.
-
-### Boas Práticas ao Usar o Seletor Universal
-
-- **Utilizar com Moderação:**
-  - Use o seletor universal apenas quando necessário e tenha cuidado para não impactar a performance do site.
-
-- **Combinar com Outros Seletores:**
-  - É comum usar o seletor universal em conjunto com outros seletores para limitar seu escopo. Por exemplo, você pode aplicar estilos a todos os elementos dentro de um contêiner específico:
-
-```css
-.container * {
-    font-family: Arial, sans-serif; /* Aplica a fonte apenas aos elementos dentro da classe .container */
-}
-```
-
-- **Usar em Conjunto com Reset CSS:**
-  - O seletor universal é frequentemente usado em conjunto com uma "reset CSS" para garantir que todos os elementos tenham uma aparência consistente ao serem renderizados por diferentes navegadores.
-
-### Exemplo Completo
-
-Aqui está um exemplo completo de como o seletor universal pode ser usado em um estilo básico de página:
-
-```html
-<!DOCTYPE html>
-<html lang="pt-BR">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="styles.css">
-    <title>Exemplo de Seletor Universal</title>
-    <style>
-        /* Reset básico usando seletor universal */
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #f4f4f4;
-            color: #333;
-        }
-
-        header {
-            background: #4CAF50;
-            color: white;
-            padding: 15px;
-            text-align: center;
-        }
-
-        section {
-            padding: 20px;
-        }
-
-        footer {
-            text-align: center;
-            padding: 10px;
-            background: #4CAF50;
-            color: white;
-        }
-    </style>
-</head>
-<body>
-    <header>
-        <h1>Bem-vindo ao Meu Site</h1>
-    </header>
-    <section>
-        <h2>Sobre Nós</h2>
-        <p>Este é um exemplo de uso do seletor universal em CSS.</p>
-    </section>
-    <footer>
-        <p>&copy; 2024 Meu Site</p>
-    </footer>
-</body>
-</html>
-```
diff --git a/dia-01/09-seletores-grupo/01-conteudo.md b/dia-01/09-seletores-grupo/01-conteudo.md
deleted file mode 100644
index 5fe5b63..0000000
--- a/dia-01/09-seletores-grupo/01-conteudo.md
+++ /dev/null
@@ -1,53 +0,0 @@
-### 9. **Seletores de Grupo**
-
-Os **seletores de grupo** permitem aplicar o mesmo conjunto de estilos a múltiplos elementos HTML ao mesmo tempo. Isso não apenas reduz a repetição de código, mas também facilita a manutenção do CSS. Os seletores de grupo são separados por vírgulas e funcionam de forma similar a selecionar um único elemento, mas abrangem vários elementos simultaneamente.
-
-#### **Sintaxe**
-```css
-seletor1, seletor2, seletor3 {
-    propriedade: valor;
-}
-```
-
-#### **Exemplo**
-```css
-h1, h2, h3 {
-    color: purple;
-    font-family: Arial, sans-serif;
-}
-```
-Neste exemplo, todos os elementos `<h1>`, `<h2>`, e `<h3>` terão a cor do texto roxa e a fonte Arial. Se um desses elementos for alterado no futuro, a alteração será refletida em todos os elementos agrupados, facilitando a manutenção.
-
-#### **Práticas Recomendadas**
-1. **Uso Eficiente**: Utilize seletores de grupo sempre que aplicar o mesmo estilo a múltiplos elementos. Isso torna o CSS mais limpo e fácil de ler.
-   
-2. **Consistência Visual**: Ao agrupar seletores, você pode garantir uma aparência consistente em toda a página, facilitando o design responsivo.
-
-3. **Evite Excessos**: Embora seja tentador agrupar muitos seletores, mantenha-os relacionados para que o código permaneça lógico e fácil de entender. 
-
-4. **Desempenho**: Seletores de grupo simples ajudam na performance, já que o navegador pode aplicar os estilos de maneira mais eficiente. Evite misturar seletores complexos com seletores de grupo.
-
-#### **Exemplo Adicional**
-Imagine que você está criando estilos para botões e deseja que todos tenham uma aparência semelhante:
-
-```css
-.button-primary, .button-secondary, .button-tertiary {
-    padding: 10px 15px;
-    border-radius: 5px;
-    font-size: 16px;
-    color: white;
-}
-
-.button-primary {
-    background-color: blue;
-}
-
-.button-secondary {
-    background-color: green;
-}
-
-.button-tertiary {
-    background-color: grey;
-}
-```
-Nesse exemplo, todos os botões compartilham algumas propriedades comuns (padding, border-radius, font-size e cor do texto), enquanto as cores de fundo são definidas separadamente. Isso ajuda a manter o código organizado e a aplicar alterações em um único lugar.
diff --git a/dia-01/10-especificidade/01-conteudo.md b/dia-01/10-especificidade/01-conteudo.md
deleted file mode 100644
index 02733ca..0000000
--- a/dia-01/10-especificidade/01-conteudo.md
+++ /dev/null
@@ -1,116 +0,0 @@
-### 9. Especificidade e Importância no CSS
-
-**Definição de Especificidade:**
-A especificidade é um conceito fundamental em CSS que determina quais regras de estilo são aplicadas a um elemento quando há múltiplas regras que podem afetá-lo. Cada seletor possui um nível de especificidade que é calculado com base em seu tipo. A regra com maior especificidade será aplicada, enquanto as regras de menor especificidade serão ignoradas.
-
-**Como a Especificidade Funciona:**
-A especificidade é calculada em uma escala que considera os seguintes componentes:
-
-1. **Estilos Inline:** 
-   - O estilo definido diretamente em um elemento HTML (ex: `<h1 style="color: red;">`) tem a maior especificidade.
-   - **Valor:** 1000
-
-2. **Seletores de ID:**
-   - Cada seletor de ID (ex: `#meu-id`) conta como uma unidade de especificidade.
-   - **Valor:** 100
-
-3. **Seletores de Classe, Atributo e Pseudo-classes:**
-   - Cada seletor de classe (ex: `.minha-classe`), atributos (ex: `[type="text"]`) ou pseudo-classes (ex: `:hover`) conta como uma unidade.
-   - **Valor:** 10
-
-4. **Seletores de Elemento e Pseudo-elementos:**
-   - Seletores de tipo de elemento (ex: `div`, `h1`) e pseudo-elementos (ex: `::before`) têm a menor especificidade.
-   - **Valor:** 1
-
-**Cálculo da Especificidade:**
-A especificidade é calculada como uma sequência de números na forma `a,b,c,d`, onde:
-
-- `a`: número de estilos inline
-- `b`: número de seletores de ID
-- `c`: número de seletores de classe, atributos e pseudo-classes
-- `d`: número de seletores de elemento e pseudo-elementos
-
-Por exemplo, para a regra:
-
-```css
-div#meu-id .minha-classe p:hover {
-    color: blue;
-}
-```
-A especificidade seria:
-- `a = 0`
-- `b = 1` (1 ID)
-- `c = 2` (1 classe + 1 pseudo-classe)
-- `d = 1` (1 elemento)
-
-Assim, a especificidade total seria (0, 1, 2, 1).
-
-### Exemplo de Especificidade
-
-Vamos considerar um exemplo prático para ilustrar como a especificidade funciona:
-
-```html
-<!DOCTYPE html>
-<html lang="pt-BR">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="styles.css">
-    <title>Especificidade no CSS</title>
-    <style>
-        /* 1. Seletor de elemento */
-        p {
-            color: black; /* Especificidade: 0,0,0,1 */
-        }
-
-        /* 2. Seletor de classe */
-        .minha-classe {
-            color: blue; /* Especificidade: 0,0,1,0 */
-        }
-
-        /* 3. Seletor de ID */
-        #meu-id {
-            color: green; /* Especificidade: 0,1,0,0 */
-        }
-
-        /* 4. Estilo inline (aplicado no HTML) */
-        <p id="meu-id" class="minha-classe" style="color: red;">Texto Exemplo</p>
-    </style>
-</head>
-<body>
-    <p id="meu-id" class="minha-classe" style="color: red;">Texto Exemplo</p>
-</body>
-</html>
-```
-
-**Resultados:**
-- O elemento `<p>` tem um estilo inline que define a cor como vermelha (`color: red;`), que tem a maior especificidade (1000).
-- As outras regras têm especificidades menores, então a cor vermelha será aplicada ao texto.
-
-### Importância do Conceito de Especificidade
-
-1. **Resolução de Conflitos:**
-   - A especificidade ajuda a resolver conflitos entre estilos. Quando várias regras se aplicam ao mesmo elemento, a especificidade determina qual estilo prevalecerá.
-
-2. **Estrutura de Estilos:**
-   - Compreender a especificidade é fundamental para organizar e estruturar suas folhas de estilo de forma eficaz, evitando estilos indesejados ou confusos.
-
-3. **Facilidade de Manutenção:**
-   - Um bom entendimento da especificidade torna mais fácil para desenvolvedores e designers manterem e atualizarem o CSS, reduzindo a complexidade e melhorando a clareza do código.
-
-4. **Desempenho:**
-   - CSS bem estruturado e com regras de especificidade claras pode melhorar o desempenho da página, pois os navegadores podem aplicar regras de estilo mais rapidamente quando a lógica é clara.
-
-### Boas Práticas
-
-- **Use Estilos Inline com Cuidado:**
-  - Evite o uso excessivo de estilos inline, a menos que seja necessário, pois eles têm a maior especificidade.
-
-- **Evite Seletores de ID em Excesso:**
-  - O uso excessivo de seletores de ID pode tornar o CSS difícil de manter, especialmente em grandes projetos.
-
-- **Utilize Classes para Reutilização:**
-  - Prefira o uso de classes para aplicar estilos. Isso facilita a reutilização de estilos e reduz a complexidade da especificidade.
-
-- **Organize seu CSS:**
-  - Organize seu código CSS de maneira lógica, agrupando regras semelhantes e mantendo uma hierarquia clara de especificidade.
\ No newline at end of file
diff --git a/dia-01/10-especificidade/02-exercicios.md b/dia-01/10-especificidade/02-exercicios.md
deleted file mode 100644
index a0c8d9b..0000000
--- a/dia-01/10-especificidade/02-exercicios.md
+++ /dev/null
@@ -1,53 +0,0 @@
-Aqui estão alguns exercícios práticos sobre seletores CSS que ajudarão a reforçar o seu entendimento sobre o tema. Cada exercício é projetado para explorar diferentes tipos de seletores e suas aplicações.
-
-### Exercícios de Seletores CSS
-
-#### Exercício 1: Seletores de Elemento
-**Objetivo:** Aplique estilos a elementos HTML usando seletores de elemento.
-
-1. Crie um arquivo HTML com várias tags `<h1>`, `<h2>`, e `<p>`.
-2. No arquivo CSS, use seletores de elemento para definir:
-   - A cor do texto de todos os `<h1>` como azul.
-   - O tamanho da fonte de todos os `<p>` como 18px.
-   - O fundo de todos os `<h2>` como amarelo.
-
-#### Exercício 2: Seletores de Classe
-**Objetivo:** Utilize seletores de classe para aplicar estilos a elementos específicos.
-
-1. Crie um arquivo HTML com elementos como `<div>`, `<p>`, e `<span>`, e adicione a classe `highlight` a alguns deles.
-2. No CSS, defina um estilo para a classe `highlight` que:
-   - Aplique um fundo laranja.
-   - Defina a cor do texto como branco.
-
-#### Exercício 3: Seletores de ID
-**Objetivo:** Aprenda a aplicar estilos usando seletores de ID.
-
-1. Crie um arquivo HTML com um `<div>` que tenha o ID `main-content`.
-2. No CSS, aplique estilos ao ID `main-content` que:
-   - Definam uma borda sólida de 2px preta.
-   - Apliquem um padding de 20px.
-   - Mudam a cor do texto para cinza.
-
-#### Exercício 4: Seletores de Atributo
-**Objetivo:** Utilize seletores de atributo para estilizar elementos.
-
-1. Crie um formulário HTML com campos de entrada (inputs) de diferentes tipos, como `text`, `email`, e `password`.
-2. No CSS, use seletores de atributo para definir:
-   - A borda de todos os campos de texto (`input[type="text"]`) como 1px sólido azul.
-   - A cor de fundo de todos os campos de email (`input[type="email"]`) como verde claro.
-
-#### Exercício 5: Seletores Combinados
-**Objetivo:** Aplique estilos com seletores combinados.
-
-1. Crie um arquivo HTML com uma estrutura de lista com `<ul>` e `<li>`.
-2. No CSS, defina os seguintes estilos:
-   - Todos os `<li>` dentro de uma `<ul>` devem ter um fundo cinza.
-   - Todos os `<li>` que são filhos diretos de uma `<ul>` devem ter uma cor de texto azul.
-
-#### Exercício 6: Pseudo-classes
-**Objetivo:** Experimente pseudo-classes para aplicar estilos baseados em estados.
-
-1. Crie um arquivo HTML com uma lista de links (`<a>`).
-2. No CSS, aplique os seguintes estilos:
-   - Mude a cor dos links para vermelho ao passar o mouse (hover).
-   - Mude a cor dos links visitados para roxo.
diff --git a/dia-01/10-especificidade/03-exercicio1-corrigido.md b/dia-01/10-especificidade/03-exercicio1-corrigido.md
deleted file mode 100644
index 4ce4b14..0000000
--- a/dia-01/10-especificidade/03-exercicio1-corrigido.md
+++ /dev/null
@@ -1,308 +0,0 @@
-Aqui estão os códigos HTML e CSS para cada um dos exercícios propostos sobre seletores CSS.
-
-### Exercício 1: Seletores de Elemento
-
-**HTML:**
-```html
-<!DOCTYPE html>
-<html lang="pt-BR">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="styles.css">
-    <title>Exercício 1</title>
-</head>
-<body>
-    <h1>Título Principal</h1>
-    <h2>Subtítulo</h2>
-    <p>Este é um parágrafo de exemplo.</p>
-    <p>Outro parágrafo para teste.</p>
-</body>
-</html>
-```
-
-**CSS (`styles.css`):**
-```css
-h1 {
-    color: blue;
-}
-
-p {
-    font-size: 18px;
-}
-
-h2 {
-    background-color: yellow;
-}
-```
-
----
-
-### Exercício 2: Seletores de Classe
-
-**HTML:**
-```html
-<!DOCTYPE html>
-<html lang="pt-BR">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="styles.css">
-    <title>Exercício 2</title>
-</head>
-<body>
-    <div class="highlight">Este é um destaque.</div>
-    <p class="highlight">Este texto também será destacado.</p>
-    <span class="highlight">Outro texto destacado.</span>
-</body>
-</html>
-```
-
-**CSS (`styles.css`):**
-```css
-.highlight {
-    background-color: orange;
-    color: white;
-}
-```
-
----
-
-### Exercício 3: Seletores de ID
-
-**HTML:**
-```html
-<!DOCTYPE html>
-<html lang="pt-BR">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="styles.css">
-    <title>Exercício 3</title>
-</head>
-<body>
-    <div id="main-content">Este é o conteúdo principal da página.</div>
-</body>
-</html>
-```
-
-**CSS (`styles.css`):**
-```css
-#main-content {
-    border: 2px solid black;
-    padding: 20px;
-    color: gray;
-}
-```
-
----
-
-### Exercício 4: Seletores de Atributo
-
-**HTML:**
-```html
-<!DOCTYPE html>
-<html lang="pt-BR">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="styles.css">
-    <title>Exercício 4</title>
-</head>
-<body>
-    <form>
-        <input type="text" placeholder="Texto">
-        <input type="email" placeholder="Email">
-        <input type="password" placeholder="Senha">
-    </form>
-</body>
-</html>
-```
-
-**CSS (`styles.css`):**
-```css
-input[type="text"] {
-    border: 1px solid blue;
-}
-
-input[type="email"] {
-    background-color: lightgreen;
-}
-```
-
----
-
-### Exercício 5: Seletores Combinados
-
-**HTML:**
-```html
-<!DOCTYPE html>
-<html lang="pt-BR">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="styles.css">
-    <title>Exercício 5</title>
-</head>
-<body>
-    <ul>
-        <li>Item 1</li>
-        <li>Item 2</li>
-    </ul>
-    <ul>
-        <li>Item 3</li>
-        <li>Item 4</li>
-    </ul>
-</body>
-</html>
-```
-
-**CSS (`styles.css`):**
-```css
-ul li {
-    background-color: gray;
-}
-
-ul > li {
-    color: blue;
-}
-```
-
----
-
-### Exercício 6: Pseudo-classes
-
-**HTML:**
-```html
-<!DOCTYPE html>
-<html lang="pt-BR">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="styles.css">
-    <title>Exercício 6</title>
-</head>
-<body>
-    <a href="#">Link 1</a>
-    <a href="#">Link 2</a>
-    <a href="#">Link 3</a>
-</body>
-</html>
-```
-
-**CSS (`styles.css`):**
-```css
-a:hover {
-    color: red;
-}
-
-a:visited {
-    color: purple;
-}
-```
-
----
-
-### Exercício 7: Pseudo-elementos
-
-**HTML:**
-```html
-<!DOCTYPE html>
-<html lang="pt-BR">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="styles.css">
-    <title>Exercício 7</title>
-</head>
-<body>
-    <p>Este é um parágrafo de exemplo.</p>
-    <p>Mais um parágrafo para teste.</p>
-</body>
-</html>
-```
-
-**CSS (`styles.css`):**
-```css
-p::first-line {
-    font-weight: bold;
-}
-
-p::before {
-    content: "Nota: ";
-    font-weight: bold;
-}
-```
-
----
-
-### Exercício 8: Seletores Universais e de Grupo
-
-**HTML:**
-```html
-<!DOCTYPE html>
-<html lang="pt-BR">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="styles.css">
-    <title>Exercício 8</title>
-</head>
-<body>
-    <h1>Título 1</h1>
-    <h2>Título 2</h2>
-    <p>Este é um parágrafo.</p>
-    <span>Texto em um span.</span>
-</body>
-</html>
-```
-
-**CSS (`styles.css`):**
-```css
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-h1, h2, p {
-    color: blue;
-}
-```
-
----
-
-### Exercício 9: Especificidade e Importância
-
-**HTML:**
-```html
-<!DOCTYPE html>
-<html lang="pt-BR">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="styles.css">
-    <title>Exercício 9</title>
-</head>
-<body>
-    <p id="special" class="highlight">Texto com ID e classe.</p>
-</body>
-</html>
-```
-
-**CSS (`styles.css`):**
-```css
-p {
-    color: black; /* Prioridade baixa */
-}
-
-.highlight {
-    color: blue; /* Prioridade média */
-}
-
-#special {
-    color: green; /* Maior prioridade */
-}
-```
-
----
\ No newline at end of file

From f4e6584998a7d6ba0ca09551087e6f9d5d2738af Mon Sep 17 00:00:00 2001
From: Roberta Azambuja <robertaazambuja01@gmail.com>
Date: Wed, 15 Oct 2025 14:26:06 -0300
Subject: [PATCH 04/13] =?UTF-8?q?Conte=C3=BAdo=20de=20pseudo=20classes,=20?=
 =?UTF-8?q?pseudo=20elementos=20e=20especificidade?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../01-conteudo.md                            | 201 ++++++++++++++++++
 dia-01/05-especificidade/01-conteudo.md       | 157 ++++++++++++++
 2 files changed, 358 insertions(+)
 create mode 100644 dia-01/04-pseudo-classes-e-elementos/01-conteudo.md
 create mode 100644 dia-01/05-especificidade/01-conteudo.md

diff --git a/dia-01/04-pseudo-classes-e-elementos/01-conteudo.md b/dia-01/04-pseudo-classes-e-elementos/01-conteudo.md
new file mode 100644
index 0000000..80092f2
--- /dev/null
+++ b/dia-01/04-pseudo-classes-e-elementos/01-conteudo.md
@@ -0,0 +1,201 @@
+# Pseudo-classes e Pseudo-elementos no CSS
+
+As **pseudo-classes** e **pseudo-elementos** são ferramentas do CSS que permitem estilizar **estados** e **partes específicas** de elementos sem alterar o HTML. Juntos, eles permitem interações ricas e efeitos visuais sem o uso de JavaScript.
+
+---
+
+## 1. Visão Geral
+
+- **Pseudo-classes** (`:nome`) selecionam elementos com base em **estado** (ex.: `:hover`, `:focus`) ou **posição** (ex.: `:first-child`, `:nth-child()`).
+- **Pseudo-elementos** (`::nome`) criam ou estilizam **partes de um elemento** (ex.: `::before`, `::first-letter`) ou **áreas geradas**, como a **seleção de texto** (`::selection`).
+
+---
+
+## 2. Pseudo-classes
+
+**Sintaxe:**
+```css
+elemento:pseudo-classe {
+  propriedade: valor;
+}
+```
+
+### 2.1 Interatividade do Usuário
+Usadas para estilizar elementos conforme o usuário interage com a página.
+
+**Principais:**
+- `:hover` — quando o mouse passa sobre o elemento.
+- `:focus` — quando o elemento está em foco (ex.: input selecionado).
+- `:active` — durante o clique ou ativação.
+
+**Exemplo:**
+```css
+button:hover {
+  background-color: blue;
+  color: white;
+}
+```
+  Neste caso, ao passar o mouse sobre um botão (`<button>`), ele muda para fundo azul e texto branco.
+
+```css
+input:focus {
+  outline: 2px solid green;
+}
+```
+  Aqui, qualquer campo de entrada (`<input>`) em foco terá uma borda verde.
+
+---
+
+### 2.2 Estruturais (posição no DOM)
+Permitem selecionar elementos com base em sua **posição** dentro do elemento pai.
+
+**Principais:**
+- `:first-child` — o primeiro filho.
+- `:last-child` — o último filho.
+- `:nth-child(n)` — filho de número *n* (ou padrão `odd`/`even`).
+
+**Exemplo:**
+  ```css
+  p:first-child {
+      font-weight: bold;
+  }
+  ```
+
+  Aqui, apenas o primeiro parágrafo (`<p>`) de um contêiner será exibido em negrito.
+
+  ```css
+  tr:nth-child(odd) {
+      background-color: #f2f2f2;
+  }
+  ```
+
+  Esse código aplica um fundo cinza claro a linhas ímpares de uma tabela.
+
+---
+
+### 2.3 Estados de Formulário
+Aplicadas a elementos de formulário de acordo com seu estado.
+
+**Principais:**
+- `:checked` — quando um checkbox/radio está selecionado.
+- `:disabled` / `:enabled`
+- `:valid` / `:invalid`
+
+**Exemplo:**
+  ```css
+  input:disabled {
+      background-color: #ddd;
+      color: #666;
+  }
+  ```
+  Este estilo altera a cor do fundo e do texto dos campos desativados para indicar que não estão disponíveis para edição.
+
+---
+
+### 2.4 Links
+Definem o estilo de links em diferentes estados.
+
+**Principais:**
+- `:link` — seleciona links que **ainda não foram visitados**.  
+- `:visited` — seleciona links que **já foram visitados**.  
+- `:hover` — aplicado quando o usuário **passa o mouse** sobre o link.  
+- `:active` — aplicado **no momento do clique**.  
+
+**Exemplo:**
+  ```css
+  a:visited {
+      color: purple;
+  }
+  ```
+
+  Links já visitados pelo usuário aparecerão na cor roxa.
+
+---
+
+### 2.5 Negação
+A pseudo-classe `:not()` aplica estilos a elementos **que não** correspondem ao seletor informado.
+
+**Exemplo:**
+```css
+button:not(.primary) {
+    background-color: gray;
+}
+```
+Esse exemplo aplica um fundo cinza a todos os botões (`<button>`) que **não** têm a classe `primary`.
+
+---
+
+## 3. Pseudo-elementos
+
+**Sintaxe:**
+```css
+elemento::pseudo-elemento {
+  propriedade: valor;
+}
+```
+
+> 💡 A sintaxe moderna usa `::`, mas `:` ainda é aceita por compatibilidade.
+
+---
+
+### 3.1 `::before` e `::after`
+Permitem **inserir conteúdo gerado** antes ou depois do conteúdo real do elemento. É **obrigatório** usar a propriedade `content` para que o pseudo-elemento apareça.
+
+**Exemplo:**
+```css
+h1::before {
+    content: "→ ";
+    color: blue;
+}
+```
+
+Aqui, o símbolo "→ " será inserido antes de cada título `<h1>` e terá a cor azul.
+
+---
+
+### 3.2 Tipografia e Seleção de Texto
+Controlam partes específicas do texto.
+
+**Principais:**
+- `::first-line` — primeira linha de um parágrafo.
+- `::first-letter` — primeira letra do texto.
+- `::selection` — parte selecionada pelo usuário.
+
+**Exemplo**:
+```css
+p::first-line {
+    font-weight: bold;
+    color: darkblue;
+}
+```
+Aqui, apenas a primeira linha de cada parágrafo (`<p>`) ficará em negrito e na cor azul escuro.
+
+---
+
+### 3.3 Usos Comuns
+- Inserir ícones ou símbolos sem alterar o HTML.
+- Marcar campos obrigatórios:
+  ```css
+  label.required::after {
+    content: " *";
+    color: red;
+  }
+  ```
+- Criar decorações, contadores ou separadores visuais.
+
+---
+
+## 4. Combinação de Pseudo-classes e Pseudo-elementos
+
+É possível combinar pseudo-classes com pseudo-elementos para aplicar estilos ainda mais dinâmicos.
+
+**Exemplo**: Destacando a primeira letra de um parágrafo em hover
+```css
+p:hover::first-letter {
+    color: orange;
+    font-size: 1.5em;
+}
+```
+
+Neste caso, a primeira letra do parágrafo ficará laranja e maior ao passar o mouse sobre ele.
+
diff --git a/dia-01/05-especificidade/01-conteudo.md b/dia-01/05-especificidade/01-conteudo.md
new file mode 100644
index 0000000..0da3971
--- /dev/null
+++ b/dia-01/05-especificidade/01-conteudo.md
@@ -0,0 +1,157 @@
+# Especificidade e Importância no CSS
+
+## **1. Definição de Especificidade:**
+A especificidade é um conceito fundamental em CSS que determina quais regras de estilo são aplicadas a um elemento quando há múltiplas regras que podem afetá-lo. Cada seletor possui um nível de especificidade que é calculado com base em seu tipo. A regra com maior especificidade será aplicada, enquanto as regras de menor especificidade serão ignoradas.
+
+## **2. Como a Especificidade Funciona:**
+A especificidade é calculada com base em **quatro categorias principais**:
+
+| Categoria                       | Exemplo de Seletor         | Pontos |
+|---------------------------------|----------------------------|--------|
+| Inline (estilos no HTML)        | `<p style="color: red;">`  | 1000   |
+| IDs                             | `#principal`               | 100    |
+| Classes, pseudo-classes e atributos | `.destaque`, `:hover`, `[type="text"]` | 10     |
+| Elementos e pseudo-elementos     | `p`, `h1`, `::before`      | 1      |
+
+> A regra geral é: **quanto maior o valor, maior a prioridade**. Se valores forem iguais, vence a **última regra declarada** no CSS.
+
+## **3. Exemplos de Especificidade**
+
+### 3.1 Elemento vs Classe
+```css
+p {
+    color: blue;
+}
+
+.destaque {
+    color: red;
+}
+```
+```html
+<p class="destaque">Este texto será vermelho.</p>
+```
+> Aqui, a classe `.destaque` tem mais especificidade que o seletor de elemento `p`, então o texto ficará vermelho.
+
+---
+### 3.2 Classe vs ID
+```css
+#principal {
+    color: green;
+}
+
+.destaque {
+    color: red;
+}
+```
+```html
+<p id="principal" class="destaque">Este texto será verde.</p>
+```
+> O ID `#principal` tem maior especificidade que a classe `.destaque`, então o texto ficará verde.
+
+---
+
+### 3.3 Inline vs Todos
+```html
+<p id="principal" style="color: purple;" class="destaque">Texto</p>
+```
+> O estilo inline (`style="color: purple;"`) tem prioridade máxima, então o texto será roxo, independentemente de IDs ou classes.
+
+---
+
+### 3.4 Pseudo-classes e Pseudo-elementos
+Pseudo-classes (`:hover`) e pseudo-elementos (`::first-letter`) entram na contagem de especificidade como **classes e elementos**, respectivamente.
+
+```css
+p::first-letter {
+    color: blue;
+}
+
+p:hover {
+    color: red;
+}
+```
+> Quando você passa o mouse (`:hover`), o texto do parágrafo ficará vermelho. O pseudo-elemento `::first-letter` ainda será azul apenas na primeira letra.
+
+---
+
+### 3.5 Seletores Combinados
+Em seletores combinados, a especificidade é a **soma das partes**. Vamos ver alguns exemplos:
+
+```css
+/* 1. Apenas elementos */
+div p {
+    color: blue; /* 1 (div) + 1 (p) = 2 pontos */
+}
+
+/* 2. Elemento + classe */
+div p.destaque {
+    color: orange; /* 1 (div) + 1 (p) + 10 (.destaque) = 12 pontos */
+}
+
+/* 3. Elemento + classe + pseudo-classe */
+div p.destaque:hover {
+    color: red; /* 1 (div) + 1 (p) + 10 (.destaque) + 10 (:hover) = 22 pontos */
+}
+
+/* 4. ID + elemento + classe */
+#conteudo p.destaque {
+    color: green; /* 100 (#conteudo) + 1 (p) + 10 (.destaque) = 111 pontos */
+}
+
+/* 5. ID + elemento + classe + pseudo-class */
+#conteudo p.destaque:hover {
+    color: purple; /* 100 (#conteudo) + 1 (p) + 10 (.destaque) + 10 (:hover) = 121 pontos */
+}
+```
+
+**HTML:**
+```html
+<div id="conteudo">
+    <p class="destaque">Exemplo de seletor combinado</p>
+</div>
+```
+
+> Quanto maior a soma da especificidade, maior a prioridade da regra. No exemplo acima, ao passar o mouse sobre o parágrafo, o texto ficará **roxo**, pois `#conteudo p.destaque:hover` tem a maior pontuação de especificidade.
+
+---
+
+
+### 3.6 Exemplo prático
+
+```html
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+    <title>Especificidade no CSS</title>
+    <style>
+        /* 1. Seletor de elemento */
+        p {
+            color: black; /* Especificidade: 0,0,0,1 */
+        }
+
+        /* 2. Seletor de classe */
+        .minha-classe {
+            color: blue; /* Especificidade: 0,0,1,0 */
+        }
+
+        /* 3. Seletor de ID */
+        #meu-id {
+            color: green; /* Especificidade: 0,1,0,0 */
+        }
+
+        /* 4. Estilo inline (aplicado no HTML) */
+        <p id="meu-id" class="minha-classe" style="color: red;">Texto Exemplo</p>
+    </style>
+</head>
+<body>
+    <p id="meu-id" class="minha-classe" style="color: red;">Texto Exemplo</p>
+</body>
+</html>
+```
+
+**Resultados:**
+- O elemento `<p>` tem um estilo inline que define a cor como vermelha (`color: red;`), que tem a maior especificidade (1000).
+- As outras regras têm especificidades menores, então a cor vermelha será aplicada ao texto.
\ No newline at end of file

From c0406a66a6f01b2efba705f23b05407f88cbaf6f Mon Sep 17 00:00:00 2001
From: Roberta Azambuja <robertaazambuja01@gmail.com>
Date: Wed, 15 Oct 2025 16:23:28 -0300
Subject: [PATCH 05/13] =?UTF-8?q?Conte=C3=BAdos=20sobre=20cor,=20texto=20e?=
 =?UTF-8?q?=20espa=C3=A7amento?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../06-propriedades-cor-texto/01-conteudo.md  | 110 ++++++++++++++
 dia-01/07-espacamento/conteudo.md             | 143 ++++++++++++++++++
 2 files changed, 253 insertions(+)
 create mode 100644 dia-01/06-propriedades-cor-texto/01-conteudo.md
 create mode 100644 dia-01/07-espacamento/conteudo.md

diff --git a/dia-01/06-propriedades-cor-texto/01-conteudo.md b/dia-01/06-propriedades-cor-texto/01-conteudo.md
new file mode 100644
index 0000000..ddec6e3
--- /dev/null
+++ b/dia-01/06-propriedades-cor-texto/01-conteudo.md
@@ -0,0 +1,110 @@
+# Propriedades de Cor, Texto e Fonte
+
+Agora que você já conhece os seletores CSS, é hora de começar a **personalizar a aparência dos elementos**.  
+Nesta aula, você aprenderá a controlar **cores, fontes e o estilo do texto**, aspectos fundamentais para deixar suas páginas mais agradáveis e legíveis.
+
+---
+
+## 1. **Propriedades de Cor**
+
+A cor pode ser aplicada tanto ao **texto** quanto ao **fundo** de um elemento.
+
+### **Cor do texto (`color`)**
+
+```css
+p {
+    color: blue;
+}
+```
+
+Você pode usar:
+
+- **Nomes de cores**: `red`, `blue`, `green`
+- **Hexadecimal**: `#FF0000`
+- **RGB**: `rgb(255, 0, 0)`
+- **RGBA** (com transparência): `rgba(255, 0, 0, 0.7)`
+
+### **Cor de fundo (`background-color`)**
+
+```css
+body {
+    background-color: #f2f2f2;
+}
+```
+
+
+---
+
+## 2. **Propriedades de Texto**
+
+O CSS oferece várias propriedades para ajustar o texto e melhorar sua legibilidade.
+
+| Propriedade | Função | Exemplo |
+|--------------|--------|----------|
+| `text-align` | Alinha o texto | `text-align: center;` |
+| `text-decoration` | Adiciona ou remove decorações (sublinhado, linha sobreposta etc.) | `text-decoration: underline;` |
+| `text-transform` | Controla letras maiúsculas/minúsculas | `text-transform: uppercase;` |
+| `line-height` | Define o espaçamento entre linhas | `line-height: 1.5;` |
+| `letter-spacing` | Define o espaçamento entre letras | `letter-spacing: 2px;` |
+
+### **Exemplo**
+
+```css
+h1 {
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+}
+```
+
+---
+
+## 3. **Propriedades de Fonte**
+
+A escolha da fonte influencia diretamente a identidade visual e a legibilidade do site.
+
+| Propriedade | Função | Exemplo |
+|--------------|--------|----------|
+| `font-family` | Define a fonte do texto | `font-family: Arial, sans-serif;` |
+| `font-size` | Define o tamanho da fonte | `font-size: 18px;` |
+| `font-weight` | Define a espessura (negrito) | `font-weight: bold;` |
+| `font-style` | Define o estilo (itálico, normal) | `font-style: italic;` |
+
+### **Exemplo Completo**
+
+```css
+p {
+    font-family: "Roboto", sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    color: #333;
+}
+```
+
+> 💡 **Dica:**  Sempre use fontes seguras ou fontes importadas via Google Fonts para garantir que o texto seja exibido corretamente em todos os dispositivos.
+
+---
+
+## 4. **Combinando Propriedades**
+
+Veja como essas propriedades podem ser usadas juntas para criar um estilo agradável:
+
+```css
+body {
+    background-color: #f9f9f9;
+    color: #333;
+    font-family: "Open Sans", sans-serif;
+    line-height: 1.6;
+}
+
+h1 {
+    color: #173AEB;
+    text-align: center;
+    text-transform: uppercase;
+}
+
+p {
+    font-size: 16px;
+    letter-spacing: 0.5px;
+}
+```
diff --git a/dia-01/07-espacamento/conteudo.md b/dia-01/07-espacamento/conteudo.md
new file mode 100644
index 0000000..cb85a2d
--- /dev/null
+++ b/dia-01/07-espacamento/conteudo.md
@@ -0,0 +1,143 @@
+# Espaçamento, Bordas e Fundo
+
+Nesta aula, você aprenderá sobre o **modelo de caixa (Box Model)** e as propriedades que definem o **espaçamento interno e externo**, **bordas** e **fundos** de cada elemento na página.
+
+---
+
+## 1. O Modelo de Caixa (Box Model)
+
+No CSS, **cada elemento é tratado como uma caixa retangular**, composta por quatro camadas principais:
+
+```
+┌──────────────────────────────┐
+│         margin               │  ← Margem (espaçamento externo)
+│  ┌────────────────────────┐  │
+│  │      border            │  │  ← Borda
+│  │  ┌──────────────────┐  │  │
+│  │  │    padding       │  │  │  ← Preenchimento interno
+│  │  │  ┌────────────┐  │  │  │
+│  │  │  │  content   │  │  │  │  ← Conteúdo (texto, imagem, etc.)
+│  │  │  └────────────┘  │  │  │
+│  │  └──────────────────┘  │  │
+│  └────────────────────────┘  │
+└──────────────────────────────┘
+```
+
+Cada uma dessas partes pode ser controlada por propriedades específicas do CSS.
+
+
+## 2. Espaçamento Interno e Externo
+
+### 2.1. Padding (Preenchimento Interno)
+
+O `padding` define o **espaço entre o conteúdo e a borda** do elemento.  
+Ele cria “respiro” dentro da caixa.
+
+```css
+div {
+    padding: 20px;
+}
+```
+
+💡 Dica: você pode definir cada lado separadamente:
+```css
+padding-top: 10px;
+padding-right: 20px;
+padding-bottom: 10px;
+padding-left: 20px;
+```
+
+Ou usar a forma resumida:
+```css
+padding: 10px 20px; /* 10px em cima/baixo e 20px nas laterais */
+```
+
+---
+
+### 2.2. Margin (Espaçamento Externo)
+
+O `margin` define o **espaço entre o elemento e os outros ao redor**.  
+É útil para separar seções e blocos na página.
+
+```css
+div {
+    margin: 30px;
+}
+```
+
+Assim como o `padding`, o `margin` também pode ser definido por lado:
+
+```css
+margin: 20px 10px 30px 10px; /* topo, direita, baixo, esquerda */
+```
+
+---
+
+## 3. Bordas
+
+As bordas (`border`) delimitam o contorno do elemento.  
+Elas podem ter **largura**, **estilo** e **cor**.
+
+### Exemplo básico:
+```css
+div {
+    border: 2px solid black;
+}
+```
+
+### Propriedades individuais:
+```css
+border-width: 2px;
+border-style: solid;
+border-color: black;
+```
+
+### Bordas arredondadas
+Use `border-radius` para suavizar os cantos:
+```css
+div {
+    border-radius: 10px;
+}
+```
+
+---
+
+## 4. Fundos
+
+O CSS permite personalizar o **fundo dos elementos** com cores, imagens e padrões.
+
+### 4.1. Cor de Fundo
+```css
+div {
+    background-color: lightblue;
+}
+```
+
+### 4.2. Imagem de Fundo
+```css
+div {
+    background-image: url("imagem-fundo.png");
+}
+```
+
+### 4.3. Repetição de Fundo
+```css
+background-repeat: no-repeat; /* não repete */
+background-repeat: repeat-x; /* repete apenas na horizontal */
+```
+
+### *4.4. Posição do Fundo
+```css
+background-position: center; /* centraliza a imagem */
+```
+
+### 4.5. Tamanho do Fundo
+```css
+background-size: cover; /* cobre todo o elemento */
+```
+
+### 4.6. Forma resumida
+```css
+background: lightblue url("imagem.png") no-repeat center/cover;
+```
+

From 6f38da7748fe2453936e5a424664cde0f3fcf01e Mon Sep 17 00:00:00 2001
From: Roberta Azambuja <robertaazambuja01@gmail.com>
Date: Thu, 16 Oct 2025 15:33:58 -0300
Subject: [PATCH 06/13] =?UTF-8?q?Exerc=C3=ADcios=20sobre=20seletores?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dia-01/02-seletores-basicos/02-exercicios.md  | 29 +++++++++++++++++++
 .../03-exercicio1-corrigido.css               | 11 +++++++
 .../04-exercicio2-corrigido.css               |  4 +++
 .../05-exercicio3-corrigido.css               |  5 ++++
 .../06-exercicio4-corrigido.css               |  7 +++++
 .../_assets/01-exercicio1-boilerplate.html    | 17 +++++++++++
 .../_assets/02-exercicio2-boilerplate.html    | 21 ++++++++++++++
 .../_assets/03-exercicio3-boilerplate.html    | 16 ++++++++++
 .../_assets/04-exercicio4-boilerplate.html    | 29 +++++++++++++++++++
 9 files changed, 139 insertions(+)
 create mode 100644 dia-01/02-seletores-basicos/02-exercicios.md
 create mode 100644 dia-01/02-seletores-basicos/03-exercicio1-corrigido.css
 create mode 100644 dia-01/02-seletores-basicos/04-exercicio2-corrigido.css
 create mode 100644 dia-01/02-seletores-basicos/05-exercicio3-corrigido.css
 create mode 100644 dia-01/02-seletores-basicos/06-exercicio4-corrigido.css
 create mode 100644 dia-01/02-seletores-basicos/_assets/01-exercicio1-boilerplate.html
 create mode 100644 dia-01/02-seletores-basicos/_assets/02-exercicio2-boilerplate.html
 create mode 100644 dia-01/02-seletores-basicos/_assets/03-exercicio3-boilerplate.html
 create mode 100644 dia-01/02-seletores-basicos/_assets/04-exercicio4-boilerplate.html

diff --git a/dia-01/02-seletores-basicos/02-exercicios.md b/dia-01/02-seletores-basicos/02-exercicios.md
new file mode 100644
index 0000000..ff9eaf5
--- /dev/null
+++ b/dia-01/02-seletores-basicos/02-exercicios.md
@@ -0,0 +1,29 @@
+# Exercícios: Seletores Básicos
+
+## Exercício 1: Seletores de Elemento
+1. Utilize como base o arquivo HTML disponilizado em [./_assets/01-exercicio1-boilerplate.html](./_assets/01-exercicio1-boilerplate.html).
+2. No arquivo CSS, use seletores de elemento para definir:
+   - A cor do texto (`color`) de todos os `<h1>` como azul.
+   - O tamanho da fonte (`font-size`) de todos os `<p>` como 18px.
+   - O fundo (`background-color`) de todos os `<h2>` como amarelo.
+
+## Exercício 2: Seletores de Classe
+1. Utilize como base o arquivo HTMl disponilizado em [./_assets/02-exercicio2-boilerplate.html](./_assets/02-exercicio2-boilerplate.html).
+2. No CSS, defina um estilo para a classe `highlight` que:
+   - Aplique um fundo (`background-color`) laranja.
+   - Defina a cor do texto (`color`) como branco.
+
+## Exercício 3: Seletores de ID
+1. Utilize como base o arquivo HTMl disponilizado em [./_assets/03-exercicio3-boilerplate.html](./_assets/03-exercicio3-boilerplate.html).
+2. No CSS, aplique estilos ao ID `main-content` que:
+   - Definam uma borda (`border`) sólida de 2px preta.
+   - Apliquem um padding (`padding`) de 20px.
+   - Mudam a cor do texto (`color`) para cinza.
+
+   
+## Exercício 4: Seletores de Atributo
+1. Utilize como base o arquivo HTML disponilizado em [./_assets/04-exercicio4-boilerplate.html](./_assets/04-exercicio4-boilerplate.html).
+2. No CSS, use seletores de atributo para definir:
+   - A borda (`border`) de todos os campos de texto como 1px sólido azul.
+   - A cor de fundo (`background-color`) de todos os campos de email como verde claro.
+
diff --git a/dia-01/02-seletores-basicos/03-exercicio1-corrigido.css b/dia-01/02-seletores-basicos/03-exercicio1-corrigido.css
new file mode 100644
index 0000000..7482af2
--- /dev/null
+++ b/dia-01/02-seletores-basicos/03-exercicio1-corrigido.css
@@ -0,0 +1,11 @@
+h1 {
+	color: blue;
+}
+
+p {
+	font-size: 18px;
+}
+
+h2 {
+	background-color: yellow;
+}
diff --git a/dia-01/02-seletores-basicos/04-exercicio2-corrigido.css b/dia-01/02-seletores-basicos/04-exercicio2-corrigido.css
new file mode 100644
index 0000000..6e3dca6
--- /dev/null
+++ b/dia-01/02-seletores-basicos/04-exercicio2-corrigido.css
@@ -0,0 +1,4 @@
+.highlight {
+    background-color: orange;
+    color: white;
+}
\ No newline at end of file
diff --git a/dia-01/02-seletores-basicos/05-exercicio3-corrigido.css b/dia-01/02-seletores-basicos/05-exercicio3-corrigido.css
new file mode 100644
index 0000000..f0a2641
--- /dev/null
+++ b/dia-01/02-seletores-basicos/05-exercicio3-corrigido.css
@@ -0,0 +1,5 @@
+#main-content {
+	border: solid 2px black;
+	padding: 20px;
+	color: gray;
+}
diff --git a/dia-01/02-seletores-basicos/06-exercicio4-corrigido.css b/dia-01/02-seletores-basicos/06-exercicio4-corrigido.css
new file mode 100644
index 0000000..b7d2863
--- /dev/null
+++ b/dia-01/02-seletores-basicos/06-exercicio4-corrigido.css
@@ -0,0 +1,7 @@
+input[type="text"] {
+	border: 1px solid blue;
+}
+
+input[type="email"] {
+	background-color: lightgreen;
+}
diff --git a/dia-01/02-seletores-basicos/_assets/01-exercicio1-boilerplate.html b/dia-01/02-seletores-basicos/_assets/01-exercicio1-boilerplate.html
new file mode 100644
index 0000000..0f14fc7
--- /dev/null
+++ b/dia-01/02-seletores-basicos/_assets/01-exercicio1-boilerplate.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Exercício 1 - Seletores de Elemento</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <h1>Este é um título H1</h1>
+    <h2>Este é um título H2</h2>
+    <p>Este é um parágrafo 1.</p>
+    <p>Este é um parágrafo 2.</p>
+    <h1>Outro H1 para testar</h1>
+    <h2>Outro H2 para testar</h2>
+</body>
+</html>
diff --git a/dia-01/02-seletores-basicos/_assets/02-exercicio2-boilerplate.html b/dia-01/02-seletores-basicos/_assets/02-exercicio2-boilerplate.html
new file mode 100644
index 0000000..a81103c
--- /dev/null
+++ b/dia-01/02-seletores-basicos/_assets/02-exercicio2-boilerplate.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Exercício de Classes</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+    <div class="highlight">Div com classe highlight</div>
+    <div>Div sem classe</div>
+
+    <p class="highlight">Parágrafo com classe highlight</p>
+    <p>Parágrafo sem classe</p>
+
+    <span class="highlight">Span com classe highlight</span>
+    <span>Span sem classe</span>
+
+</body>
+</html>
diff --git a/dia-01/02-seletores-basicos/_assets/03-exercicio3-boilerplate.html b/dia-01/02-seletores-basicos/_assets/03-exercicio3-boilerplate.html
new file mode 100644
index 0000000..26a32a6
--- /dev/null
+++ b/dia-01/02-seletores-basicos/_assets/03-exercicio3-boilerplate.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Exercício de IDs</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+    <div id="main-content">
+        Este é o conteúdo principal.
+    </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/dia-01/02-seletores-basicos/_assets/04-exercicio4-boilerplate.html b/dia-01/02-seletores-basicos/_assets/04-exercicio4-boilerplate.html
new file mode 100644
index 0000000..e56384a
--- /dev/null
+++ b/dia-01/02-seletores-basicos/_assets/04-exercicio4-boilerplate.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Exercício de Seletores de Atributo</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+    <form>
+        <label for="nome">Nome:</label>
+        <input type="text" id="nome" name="nome">
+
+        <label for="sobrenome">Sobrenome:</label>
+        <input type="text" id="sobrenome" name="sobrenome">
+
+        <label for="email">Email:</label>
+        <input type="email" id="email" name="email">
+
+        <label for="confirmar">Confirme seu e-mail:</label>
+        <input type="email" id="confirmar" name="confirmar">
+
+        <label for="senha">Senha:</label>
+        <input type="password" id="senha" name="senha">
+    </form>
+
+</body>
+</html>

From 4e53deaaec7bb28dd5aa25f1d0e5db18ec579d31 Mon Sep 17 00:00:00 2001
From: Roberta Azambuja <robertaazambuja01@gmail.com>
Date: Fri, 17 Oct 2025 14:06:54 -0300
Subject: [PATCH 07/13] =?UTF-8?q?Exerc=C3=ADcios=20sobre=20seletores=20de?=
 =?UTF-8?q?=20grupo,=20combinados=20e=20universal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../03-seletores-combinados/02-exercicios.md  |  8 +++++++
 .../03-exercicio1-corrigido.css               | 21 +++++++++++++++++++
 .../_assets/01-exercicio1-boilerplate.html    | 20 ++++++++++++++++++
 3 files changed, 49 insertions(+)
 create mode 100644 dia-01/03-seletores-combinados/02-exercicios.md
 create mode 100644 dia-01/03-seletores-combinados/03-exercicio1-corrigido.css
 create mode 100644 dia-01/03-seletores-combinados/_assets/01-exercicio1-boilerplate.html

diff --git a/dia-01/03-seletores-combinados/02-exercicios.md b/dia-01/03-seletores-combinados/02-exercicios.md
new file mode 100644
index 0000000..506154b
--- /dev/null
+++ b/dia-01/03-seletores-combinados/02-exercicios.md
@@ -0,0 +1,8 @@
+# Exercício: Seletores de Grupo, Combinados e Universal
+
+1. Utilize como base o arquivo HTML disponibilizado em [./_assets/01-exercicio1-boilerplate.html](./_assets/01-exercicio1-boilerplate.html).
+2. No CSS, defina os seguintes estilos:
+   - Aplique uma margem (`margin`) um padding (`padding`) de `0` a todos os elementos.
+   - Todos `<h1>` e `<h2>` devem ter o texto centralizado (`text-align`) e uma cor de texto (`color`) azul.
+   - Todos os `<li>` dentro de uma `<ul>` devem ter um fundo (`background-color`) cinza.
+   - Todos os `<li>` que são filhos diretos de uma `<ul>` devem ter uma cor de texto azul.
diff --git a/dia-01/03-seletores-combinados/03-exercicio1-corrigido.css b/dia-01/03-seletores-combinados/03-exercicio1-corrigido.css
new file mode 100644
index 0000000..ce66df8
--- /dev/null
+++ b/dia-01/03-seletores-combinados/03-exercicio1-corrigido.css
@@ -0,0 +1,21 @@
+/* Remove margens e espaçamentos padrões do navegador */
+* {
+  margin: 0;
+  padding: 0;
+}
+
+/* Centraliza o texto e aplica cor azul aos títulos h1 e h2 */
+h1, h2 {
+  text-align: center;
+  color: blue;
+}
+
+/* Todos os <li> dentro de uma <ul> têm fundo cinza */
+ul li {
+  background-color: gray;
+}
+
+/* Todos os <li> filhos diretos de uma <ul> têm texto azul */
+ul > li {
+  color: blue;
+}
\ No newline at end of file
diff --git a/dia-01/03-seletores-combinados/_assets/01-exercicio1-boilerplate.html b/dia-01/03-seletores-combinados/_assets/01-exercicio1-boilerplate.html
new file mode 100644
index 0000000..fe15630
--- /dev/null
+++ b/dia-01/03-seletores-combinados/_assets/01-exercicio1-boilerplate.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Exercício - Seletores Combinados e de Grupo</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+  <h1>Lista de Compras</h1>
+  <h2>Frutas</h2>
+  
+  <ul>
+    <li>Maçã</li>
+    <li>Banana</li>
+    <li>Laranja</li>
+  </ul>
+</body>
+</html>
\ No newline at end of file

From 8b837bf08b441ba6ce23f9f5c0b70c07d90ebf80 Mon Sep 17 00:00:00 2001
From: Roberta Azambuja <robertaazambuja01@gmail.com>
Date: Fri, 17 Oct 2025 14:18:10 -0300
Subject: [PATCH 08/13] =?UTF-8?q?Exerc=C3=ADcios=20de=20pseudo-classes=20e?=
 =?UTF-8?q?=20pseudo-elementos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../02-exercicios.md                          |  7 +++++++
 .../03-exercicio1-corrigido.css               | 19 +++++++++++++++++++
 .../_assets/01-exercicio1-boilerplate.html    | 19 +++++++++++++++++++
 3 files changed, 45 insertions(+)
 create mode 100644 dia-01/04-pseudo-classes-e-elementos/02-exercicios.md
 create mode 100644 dia-01/04-pseudo-classes-e-elementos/03-exercicio1-corrigido.css
 create mode 100644 dia-01/04-pseudo-classes-e-elementos/_assets/01-exercicio1-boilerplate.html

diff --git a/dia-01/04-pseudo-classes-e-elementos/02-exercicios.md b/dia-01/04-pseudo-classes-e-elementos/02-exercicios.md
new file mode 100644
index 0000000..8577988
--- /dev/null
+++ b/dia-01/04-pseudo-classes-e-elementos/02-exercicios.md
@@ -0,0 +1,7 @@
+# Exercício: Pseudo-classes e Pseudo-elementos
+1. Utilize como base o arquivo HTML disponibilizado em [./_assets/01-exercicio1-boilerplate.html](./_assets/01-exercicio1-boilerplate.html).
+2. No CSS, aplique os seguintes estilos:
+   - Mude a cor dos links para vermelho ao passar o mouse (hover).
+   - Mude a cor dos links visitados para verde.
+   - Destaque o primeiro link da lista, alterando sua cor de fundo para cinza.
+   - Adicione um ícone de seta (→) antes de cada link.
diff --git a/dia-01/04-pseudo-classes-e-elementos/03-exercicio1-corrigido.css b/dia-01/04-pseudo-classes-e-elementos/03-exercicio1-corrigido.css
new file mode 100644
index 0000000..6c72aff
--- /dev/null
+++ b/dia-01/04-pseudo-classes-e-elementos/03-exercicio1-corrigido.css
@@ -0,0 +1,19 @@
+/* Muda a cor dos links ao passar o mouse */
+a:hover {
+  color: red;
+}
+
+/* Muda a cor dos links visitados */
+a:visited {
+  color: green;
+}
+
+/* Destaca o primeiro link da lista */
+li:first-child a {
+  background-color: gray;
+}
+
+/* Adiciona um ícone de seta antes de cada link */
+a::before {
+  content: "→ ";
+}
\ No newline at end of file
diff --git a/dia-01/04-pseudo-classes-e-elementos/_assets/01-exercicio1-boilerplate.html b/dia-01/04-pseudo-classes-e-elementos/_assets/01-exercicio1-boilerplate.html
new file mode 100644
index 0000000..f4a73f8
--- /dev/null
+++ b/dia-01/04-pseudo-classes-e-elementos/_assets/01-exercicio1-boilerplate.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Exercício 6 — Pseudo-classes e Pseudo-elementos</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <h1>Meus Links Favoritos</h1>
+
+  <ul>
+    <li><a href="https://www.mozilla.org" target="_blank">Mozilla</a></li>
+    <li><a href="https://www.wikipedia.org" target="_blank">Wikipedia</a></li>
+    <li><a href="https://www.github.com" target="_blank">GitHub</a></li>
+    <li><a href="https://www.w3schools.com" target="_blank">W3Schools</a></li>
+  </ul>
+</body>
+</html>

From 4bdf4db4430beca1c3cc485560d3d274a67eb0cb Mon Sep 17 00:00:00 2001
From: Roberta Azambuja <robertaazambuja01@gmail.com>
Date: Fri, 17 Oct 2025 14:35:53 -0300
Subject: [PATCH 09/13] =?UTF-8?q?Exerc=C3=ADcios=20de=20cor,=20texto=20e?=
 =?UTF-8?q?=20fonte?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../02-exercicios.md                          | 10 ++++++++
 .../03-exercicio1-corrigido.css               | 25 +++++++++++++++++++
 .../_assets/01-exercicio1-boilerplate.html    | 18 +++++++++++++
 3 files changed, 53 insertions(+)
 create mode 100644 dia-01/06-propriedades-cor-texto/02-exercicios.md
 create mode 100644 dia-01/06-propriedades-cor-texto/03-exercicio1-corrigido.css
 create mode 100644 dia-01/06-propriedades-cor-texto/_assets/01-exercicio1-boilerplate.html

diff --git a/dia-01/06-propriedades-cor-texto/02-exercicios.md b/dia-01/06-propriedades-cor-texto/02-exercicios.md
new file mode 100644
index 0000000..705de3e
--- /dev/null
+++ b/dia-01/06-propriedades-cor-texto/02-exercicios.md
@@ -0,0 +1,10 @@
+# Exercício: Cor, Texto e Fonte
+
+1. Utilize como base o arquivo HTML disponibilizado em [./_assets/01-exercicio1-boilerplate.html](./_assets/01-exercicio1-boilerplate.html)
+2. No arquivo CSS, aplique os seguintes estilos:
+    - Defina uma cor de fundo #f0f8ff para a página e centralize todo o texto.
+    - Altere a cor do texto dos títulos:
+        - `<h1>` deve ter a cor #173AEB.
+        - `<h2>` deve ter a cor #FC9642.
+    - Aplique nos parágrafos a fonte "Arial" e defina o tamanho da fonte como 18px.
+    - Destaque a palavra dentro da tag `<span>` deixando-a itálica.
\ No newline at end of file
diff --git a/dia-01/06-propriedades-cor-texto/03-exercicio1-corrigido.css b/dia-01/06-propriedades-cor-texto/03-exercicio1-corrigido.css
new file mode 100644
index 0000000..bb70b21
--- /dev/null
+++ b/dia-01/06-propriedades-cor-texto/03-exercicio1-corrigido.css
@@ -0,0 +1,25 @@
+/* Define a cor de fundo da página e centraliza todo o texto*/
+body {
+    background-color: #f0f8ff; 
+    text-align: center;        
+}
+
+/* Altera a cor dos títulos */
+h1 {
+    color: #173AEB; 
+}
+
+h2 {
+    color: #FC9642; 
+}
+
+/* Parágrafos */
+p {
+    font-family: Arial, sans-serif;
+    font-size: 18px;
+}
+
+/* Palavra destacada */
+span {
+    font-style: italic;
+}
diff --git a/dia-01/06-propriedades-cor-texto/_assets/01-exercicio1-boilerplate.html b/dia-01/06-propriedades-cor-texto/_assets/01-exercicio1-boilerplate.html
new file mode 100644
index 0000000..37ac8e4
--- /dev/null
+++ b/dia-01/06-propriedades-cor-texto/_assets/01-exercicio1-boilerplate.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Exercício: Cor, Texto e Fonte</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <h1>Bem-vindo ao Mundo das Cores e Fontes!</h1>
+  <h2>Explore diferentes estilos</h2>
+
+  <p>
+    Aprender CSS é uma jornada divertida e cheia de possibilidades. 
+    <span>Experimente!</span> Mudar cores e fontes transforma completamente o visual de uma página.
+  </p>
+</body>
+</html>

From 052b7fd5a943b9b3f79d8eb0f54770ad9889075b Mon Sep 17 00:00:00 2001
From: Roberta Azambuja <robertaazambuja01@gmail.com>
Date: Mon, 20 Oct 2025 11:10:35 -0300
Subject: [PATCH 10/13] =?UTF-8?q?Ajuste=20no=20nome=20do=20arquivo=20e=20e?=
 =?UTF-8?q?xerc=C3=ADcios=20sobre=20espa=C3=A7amento?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{conteudo.md => 01-conteudo.md}             |  0
 dia-01/07-espacamento/02-exercicios.md          | 11 +++++++++++
 .../07-espacamento/03-exercicio1-corrigido.css  | 17 +++++++++++++++++
 .../_assets/01-exercicio1-boilerplate.html      | 16 ++++++++++++++++
 4 files changed, 44 insertions(+)
 rename dia-01/07-espacamento/{conteudo.md => 01-conteudo.md} (100%)
 create mode 100644 dia-01/07-espacamento/02-exercicios.md
 create mode 100644 dia-01/07-espacamento/03-exercicio1-corrigido.css
 create mode 100644 dia-01/07-espacamento/_assets/01-exercicio1-boilerplate.html

diff --git a/dia-01/07-espacamento/conteudo.md b/dia-01/07-espacamento/01-conteudo.md
similarity index 100%
rename from dia-01/07-espacamento/conteudo.md
rename to dia-01/07-espacamento/01-conteudo.md
diff --git a/dia-01/07-espacamento/02-exercicios.md b/dia-01/07-espacamento/02-exercicios.md
new file mode 100644
index 0000000..038fb3c
--- /dev/null
+++ b/dia-01/07-espacamento/02-exercicios.md
@@ -0,0 +1,11 @@
+# Exercício: Espaçamento
+
+1. Utilize como base o arquivo HTML disponibilizado em [./_assets/01-exercicio1-boilerplate.html](./_assets/01-exercicio1-boilerplate.html)
+2. No arquivo CSS, aplique os seguintes estilos:
+    - A div perfil deve ter:
+        - Espaçamento interno: 20px
+        - Espaçamento externo: 40px
+        - Borda: 2px sólida azul
+    - O título `<h2>` deve ter uma margem inferior de 15px
+    - O último `<p>` deve ter uma margem superior de 10px
+    - Todos os `<p>` devem ter espaçamento interno de 5px
diff --git a/dia-01/07-espacamento/03-exercicio1-corrigido.css b/dia-01/07-espacamento/03-exercicio1-corrigido.css
new file mode 100644
index 0000000..028e6b3
--- /dev/null
+++ b/dia-01/07-espacamento/03-exercicio1-corrigido.css
@@ -0,0 +1,17 @@
+.perfil {
+	padding: 20px;
+	margin: 40px;
+	border: 2px solid blue;
+}
+
+h2 {
+	margin-bottom: 15px;
+}
+
+p:last-of-type {
+	margin-top: 10px;
+}
+
+p {
+	padding: 5px;
+}
diff --git a/dia-01/07-espacamento/_assets/01-exercicio1-boilerplate.html b/dia-01/07-espacamento/_assets/01-exercicio1-boilerplate.html
new file mode 100644
index 0000000..d82636d
--- /dev/null
+++ b/dia-01/07-espacamento/_assets/01-exercicio1-boilerplate.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Exemplo de Espaçamento e Bordas</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="perfil">
+        <h2>Nome do Usuário</h2>
+        <p>Descrição curta sobre o usuário.</p>
+        <p>contato@email.com</p>
+    </div>
+</body>
+</html>

From a74ab30811313d906b4532317dee2533eff676fe Mon Sep 17 00:00:00 2001
From: Roberta Azambuja <robertaazambuja01@gmail.com>
Date: Tue, 21 Oct 2025 14:48:05 -0300
Subject: [PATCH 11/13] =?UTF-8?q?Conte=C3=BAdo=20de=20posicionamento=20e?=
 =?UTF-8?q?=20responsividade?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dia-01/08-posicionamento/01-conteudo.md | 163 ++++++++++++++++++++++++
 dia-01/09-responsividade/01-conteudo.md |  56 ++++++++
 2 files changed, 219 insertions(+)
 create mode 100644 dia-01/08-posicionamento/01-conteudo.md
 create mode 100644 dia-01/09-responsividade/01-conteudo.md

diff --git a/dia-01/08-posicionamento/01-conteudo.md b/dia-01/08-posicionamento/01-conteudo.md
new file mode 100644
index 0000000..7cca643
--- /dev/null
+++ b/dia-01/08-posicionamento/01-conteudo.md
@@ -0,0 +1,163 @@
+# Posicionamento e Display
+
+Nesta aula, você aprenderá como controlar o **comportamento e a posição dos elementos** na página.  
+Com o CSS, é possível determinar **como os blocos se organizam**, **como se sobrepõem** e **como se ajustam ao espaço disponível**.
+
+---
+
+## 1. Tipos de Exibição (Display)
+
+A propriedade `display` define **como um elemento é exibido na página** — se ele ocupa toda a linha, se pode ficar lado a lado com outros, ou se é invisível.
+
+### Principais valores:
+
+| Valor | Descrição | Exemplo |
+|-------|------------|----------|
+| `block` | O elemento ocupa toda a largura disponível e começa em uma nova linha. | `<div>`, `<p>`, `<section>` |
+| `inline` | O elemento ocupa apenas o espaço necessário e **não quebra linha**. | `<span>`, `<a>`, `<strong>` |
+| `inline-block` | Combina características dos dois: ocupa só o espaço necessário, mas permite definir largura e altura. | Ideal para botões, menus, etc. |
+| `none` | Oculta completamente o elemento da página (não ocupa espaço). | — |
+
+### Exemplo :
+```css
+p {
+    display: block;
+}
+```
+
+---
+
+## 2. Fluxo da Página e o Position
+
+A propriedade `position` define **como o elemento é posicionado** em relação ao seu contêiner, ao documento ou a outros elementos.
+
+### Principais valores de `position`:
+
+| Valor | Descrição |
+|-------|------------|
+| `static` | Padrão. O elemento segue o fluxo normal da página. |
+| `relative` | Move o elemento em relação à sua posição original. |
+| `absolute` | Posiciona o elemento de forma **absoluta**, em relação ao primeiro ancestral com `position: relative`. |
+| `fixed` | Fixa o elemento em uma posição específica da janela (mesmo ao rolar a página). |
+| `sticky` | Combina comportamentos de `relative` e `fixed`: o elemento “gruda” ao rolar até certo ponto. |
+
+### Exemplo:
+```css
+.caixa1 {
+    position: relative;
+    top: 20px;
+    left: 10px;
+}
+
+.menu-fixo {
+    position: fixed;
+    top: 0;
+    width: 100%;
+}
+```
+
+---
+
+## 3. Controle de Sobreposição – `z-index`
+
+Quando dois elementos se sobrepõem, o `z-index` define **quem fica por cima**.
+
+### Exemplo:
+
+```css
+.elemento1 {
+    position: absolute;
+    z-index: 1;
+}
+
+.elemento2 {
+    position: absolute;
+    z-index: 2; /* Fica acima */
+}
+```
+
+> 💡 O `z-index` só funciona em elementos **com `position` diferente de `static`**.
+
+---
+
+## 4. Controle de Conteúdo – `overflow`
+
+A propriedade `overflow` define **o que acontece quando o conteúdo ultrapassa o tamanho do elemento**.
+
+| Valor | Efeito |
+|--------|---------|
+| `visible` | O conteúdo que ultrapassar será exibido (padrão). |
+| `hidden` | O conteúdo que ultrapassar será cortado. |
+| `scroll` | Adiciona barras de rolagem sempre. |
+| `auto` | Adiciona barras de rolagem somente quando necessário. |
+
+### Exemplo:
+
+```css
+div {
+    width: 200px;
+    height: 100px;
+    overflow: auto;
+}
+```
+
+---
+
+## 5. Sistemas Modernos de Layout: Flexbox e Grid
+
+Com o tempo, o CSS evoluiu e trouxe novas formas de organizar elementos na tela.  
+As propriedades **`flexbox`** e **`grid`** são ferramentas modernas para construir **layouts responsivos e organizados**, substituindo boa parte do uso de `float` e `position` para estruturar páginas. Nesta aula, veremos uma introdução sobre esses recursos.
+
+---
+
+### 5.1 Flexbox (Layout unidimensional)
+
+O **Flexbox** foi criado para facilitar a **organização de elementos em linha ou em coluna**, ajustando automaticamente o espaço entre eles. Com ele, você pode **centralizar itens**, **criar espaçamentos uniformes**, e **adaptar o layout a diferentes tamanhos de tela**.
+
+Para usar o Flexbox, aplicamos a propriedade `display: flex` ao **container** (o elemento pai).  
+Os elementos dentro dele tornam-se **itens flexíveis** e podem ser alinhados com facilidade.
+
+**Exemplo:**
+
+```css
+.container {
+    display: flex;
+    justify-content: center; /* Alinha horizontalmente */
+    align-items: center; /* Alinha verticalmente */
+    gap: 10px;
+}
+```
+
+**HTML:**
+```html
+<div class="container">
+    <div class="item">A</div>
+    <div class="item">B</div>
+    <div class="item">C</div>
+</div>
+```
+
+
+---
+
+### 5.2 Grid (Layout bidimensional)
+
+O **Grid Layout** organiza o conteúdo em **linhas e colunas**, sendo ideal para criar **estruturas mais complexas**, como o esqueleto de uma página completa.
+Para usar o Grid, aplicamos `display: grid` ao **container** (elemento pai).  
+Os elementos filhos tornam-se **itens de grid**.
+
+```css
+.container {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 10px;
+}
+```
+
+**HTML:**
+```html
+<div class="container">
+    <div class="sidebar">Barra lateral</div>
+    <div class="content">Conteúdo principal</div>
+</div>
+```
\ No newline at end of file
diff --git a/dia-01/09-responsividade/01-conteudo.md b/dia-01/09-responsividade/01-conteudo.md
new file mode 100644
index 0000000..1f0c56b
--- /dev/null
+++ b/dia-01/09-responsividade/01-conteudo.md
@@ -0,0 +1,56 @@
+# Responsividade e Media Queries
+
+Responsividade é a capacidade de uma página web se adaptar a diferentes tamanhos de tela e dispositivos, garantindo que o conteúdo seja exibido de forma legível e funcional em desktops, tablets e smartphones.
+
+## 1. Por que a Responsividade é Importante
+- Melhora a experiência do usuário.
+- Aumenta a acessibilidade.
+- Ajuda no SEO, já que mecanismos de busca valorizam sites responsivos.
+- Evita que o layout quebre em telas menores ou maiores.
+
+## 2. Conceito de Media Queries
+As **media queries** permitem aplicar estilos CSS diferentes dependendo das características do dispositivo, como largura da tela, altura, orientação e resolução.
+
+### Sintaxe
+```css
+@media (condição) {
+    /* estilos aplicados quando a condição é verdadeira */
+}
+```
+
+### Exemplo
+
+```css
+/* Estilo padrão para desktop */
+body {
+    font-size: 16px;
+}
+
+/* Estilo para telas menores que 768px (tablets e smartphones) */
+@media (max-width: 768px) {
+    body {
+        font-size: 14px;
+    }
+}
+```
+
+## 3. Condições Comuns em Media Queries
+
+* `max-width`: aplica estilos quando a largura da tela é menor ou igual ao valor definido.
+* `min-width`: aplica estilos quando a largura da tela é maior ou igual ao valor definido.
+* `orientation`: detecta se o dispositivo está em modo retrato (`portrait`) ou paisagem (`landscape`).
+
+### Exemplo com múltiplas condições
+
+```css
+@media (max-width: 768px) and (orientation: portrait) {
+    body {
+        font-size: 13px;
+    }
+}
+```
+
+## 4. Boas Práticas
+
+* Evite definir tamanhos fixos; prefira unidades relativas como `%`, `em`, `rem`, `vh` e `vw`.
+* Teste sempre em diferentes dispositivos e resoluções.

From 376d9f99da3ed2bcfdc3a2c45c587b360d2219a9 Mon Sep 17 00:00:00 2001
From: Roberta Azambuja <robertaazambuja01@gmail.com>
Date: Tue, 21 Oct 2025 14:52:44 -0300
Subject: [PATCH 12/13] =?UTF-8?q?Exerc=C3=ADcios=20de=20responsividade?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dia-01/09-responsividade/02-exercicios.md     |  7 ++
 .../03-exercicio1-corrigido.css               | 28 ++++++
 .../_assets/01-exercicio1-boilerplate.html    | 98 +++++++++++++++++++
 3 files changed, 133 insertions(+)
 create mode 100644 dia-01/09-responsividade/02-exercicios.md
 create mode 100644 dia-01/09-responsividade/03-exercicio1-corrigido.css
 create mode 100644 dia-01/09-responsividade/_assets/01-exercicio1-boilerplate.html

diff --git a/dia-01/09-responsividade/02-exercicios.md b/dia-01/09-responsividade/02-exercicios.md
new file mode 100644
index 0000000..49fa1ef
--- /dev/null
+++ b/dia-01/09-responsividade/02-exercicios.md
@@ -0,0 +1,7 @@
+# Exercício: Responsividade
+
+1. Utilize como base o arquivo HTML disponibilizado em [./_assets/01-exercicio1-boilerplate.html](./_assets/01-exercicio1-boilerplate.html)
+2. No arquivo CSS, aplique os seguintes estilos: 
+    - Quando a tela tiver largura menor que 768px, os cards do menu devem ser exibidos um abaixo do outro (em coluna), com espaçamento entre eles.
+    - Aumente o tamanho da fonte do título (h1) para 2rem em telas grandes (largura acima de 1024px). Reduza para 1.5rem em telas menores que 480px.
+    - Diminua o padding do main para 10px em telas menores que 600px.
\ No newline at end of file
diff --git a/dia-01/09-responsividade/03-exercicio1-corrigido.css b/dia-01/09-responsividade/03-exercicio1-corrigido.css
new file mode 100644
index 0000000..ac978f6
--- /dev/null
+++ b/dia-01/09-responsividade/03-exercicio1-corrigido.css
@@ -0,0 +1,28 @@
+
+/* 1. Cards em coluna abaixo de 768px */
+@media (max-width: 768px) {
+  .menu {
+    flex-direction: column;
+    gap: 20px;
+  }
+}
+
+/* 2. Tamanho da fonte do título */
+@media (min-width: 1024px) {
+  h1 {
+    font-size: 2rem;
+  }
+}
+
+@media (max-width: 480px) {
+  h1 {
+    font-size: 1.5rem;
+  }
+}
+
+/* 3. Padding reduzido no main */
+@media (max-width: 600px) {
+  main {
+    padding: 10px;
+  }
+}
diff --git a/dia-01/09-responsividade/_assets/01-exercicio1-boilerplate.html b/dia-01/09-responsividade/_assets/01-exercicio1-boilerplate.html
new file mode 100644
index 0000000..c09700c
--- /dev/null
+++ b/dia-01/09-responsividade/_assets/01-exercicio1-boilerplate.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Café do Pôr do Sol</title>
+  <link rel="stylesheet" href="styles.css">
+  <style>
+    /* estilos básicos */
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      font-family: Arial, sans-serif;
+      background: #fafafa;
+      color: #333;
+      line-height: 1.6;
+    }
+
+    header {
+      background-color: #d9b382;
+      padding: 20px;
+      text-align: center;
+    }
+
+    header h1 {
+      font-size: 1.8rem;
+      color: #3e2b17;
+    }
+
+    main {
+      padding: 20px;
+    }
+
+    .intro {
+      text-align: center;
+      margin-bottom: 20px;
+    }
+
+    .menu {
+      display: flex;
+      justify-content: space-between;
+      gap: 20px;
+    }
+
+    .card {
+      background: #fff;
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      padding: 16px;
+      flex: 1;
+      text-align: center;
+    }
+
+    footer {
+      background-color: #3e2b17;
+      color: #fff;
+      text-align: center;
+      padding: 16px;
+      margin-top: 20px;
+    }
+  </style>
+</head>
+
+<body>
+  <header>
+    <h1>Café do Pôr do Sol</h1>
+  </header>
+
+  <main>
+    <section class="intro">
+      <p>Bem-vindo ao nosso café! Experimente sabores únicos com uma vista inesquecível.</p>
+    </section>
+
+    <section class="menu">
+      <div class="card">
+        <h2>Cappuccino</h2>
+        <p>Uma mistura cremosa de café expresso, leite vaporizado e espuma suave.</p>
+      </div>
+      <div class="card">
+        <h2>Latte</h2>
+        <p>Leite vaporizado com um toque de café expresso — perfeito para qualquer hora.</p>
+      </div>
+      <div class="card">
+        <h2>Mocha</h2>
+        <p>Combinação deliciosa de café, chocolate e leite vaporizado.</p>
+      </div>
+    </section>
+  </main>
+
+  <footer>
+    <p>&copy; 2025 Café do Pôr do Sol</p>
+  </footer>
+</body>
+</html>

From dbd0f57766cbec3e5267629b8584e2d1b7723b8b Mon Sep 17 00:00:00 2001
From: Roberta Azambuja <robertaazambuja01@gmail.com>
Date: Wed, 22 Oct 2025 10:38:51 -0300
Subject: [PATCH 13/13] =?UTF-8?q?Exerc=C3=ADcios=20de=20posicionamento?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dia-01/08-posicionamento/02-exercicios.md     | 20 +++++
 .../03-exercicio1-corrigido.css               | 11 +++
 .../04-exercicio2-corrigido.css               | 28 +++++++
 .../_assets/01-exercicio1-boilerplate.html    | 50 +++++++++++
 .../_assets/02-exercicio2-boilerplate.html    | 84 +++++++++++++++++++
 5 files changed, 193 insertions(+)
 create mode 100644 dia-01/08-posicionamento/02-exercicios.md
 create mode 100644 dia-01/08-posicionamento/03-exercicio1-corrigido.css
 create mode 100644 dia-01/08-posicionamento/04-exercicio2-corrigido.css
 create mode 100644 dia-01/08-posicionamento/_assets/01-exercicio1-boilerplate.html
 create mode 100644 dia-01/08-posicionamento/_assets/02-exercicio2-boilerplate.html

diff --git a/dia-01/08-posicionamento/02-exercicios.md b/dia-01/08-posicionamento/02-exercicios.md
new file mode 100644
index 0000000..2a13263
--- /dev/null
+++ b/dia-01/08-posicionamento/02-exercicios.md
@@ -0,0 +1,20 @@
+# Exercícios: Posicionamento e Display
+
+## Exercício 1: Display
+1. Utilize como base o arquivo HTML disponibilizado em [./_assets/01-exercicio1-boilerplate.html](./_assets/01-exercicio1-boilerplate.html)
+2. No arquivo CSS, aplique os seguintes estilos:
+    - Faça com que o elemento `.item-a` (que é um `<p>`, logo `block` por padrão) se comporte como um elemento inline.
+    - O elemento `.item-b` é um `<span>` (`inline` por padrão). Altere-o para `inline-block`.
+    - Use a propriedade `display` para fazer o elemento `.item-c` desaparecer completamente da página.
+   
+
+## Exercício 2: Position e z-index 
+1. Utilize como base o arquivo HTML disponibilizado em [./_assets/02-exercicio2-boilerplate.html](./_assets/02-exercicio2-boilerplate.html) 
+2. No arquivo CSS, aplique os seguintes estilos:
+    - Defina o elemento `.container-position` como o ponto de referência para os filhos, usando `position: relative;`.
+    - Mova a `.caixa1` (que está dentro do contêiner) 20px para baixo (top) e 30px para a direita (left) de sua posição original, usando `position: relative`;.
+    - Defina a `.caixa2` para ter posição absoluta e posicione-a no canto superior direito do `.container-position`.
+    - Defina a `.caixa3` para ter posição absoluta e posicione-a no canto inferior esquerdo do `.container-position`.
+    - Faça com que o elemento `.menu-fixo` fique fixo no topo da janela.
+    - Garanta que a `.caixa1` fique por cima de qualquer outra coisa que ela possa cobrir.
+      
diff --git a/dia-01/08-posicionamento/03-exercicio1-corrigido.css b/dia-01/08-posicionamento/03-exercicio1-corrigido.css
new file mode 100644
index 0000000..c89d315
--- /dev/null
+++ b/dia-01/08-posicionamento/03-exercicio1-corrigido.css
@@ -0,0 +1,11 @@
+.item-a {
+    display: inline;
+}
+
+.item-b {
+    display: inline-block;
+}
+
+.item-c {
+    display: none;
+}
\ No newline at end of file
diff --git a/dia-01/08-posicionamento/04-exercicio2-corrigido.css b/dia-01/08-posicionamento/04-exercicio2-corrigido.css
new file mode 100644
index 0000000..964ea0d
--- /dev/null
+++ b/dia-01/08-posicionamento/04-exercicio2-corrigido.css
@@ -0,0 +1,28 @@
+.container-position {
+    position: relative;
+}
+
+.caixa1 {
+    position: relative;
+    top: 20px;
+    left: 30px;
+    z-index: 1; 
+}
+
+.caixa2 {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+ 
+.caixa3 {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+}
+
+.menu-fixo {
+    position: fixed;
+    top: 0;
+    left: 0;
+}  
\ No newline at end of file
diff --git a/dia-01/08-posicionamento/_assets/01-exercicio1-boilerplate.html b/dia-01/08-posicionamento/_assets/01-exercicio1-boilerplate.html
new file mode 100644
index 0000000..d217ed4
--- /dev/null
+++ b/dia-01/08-posicionamento/_assets/01-exercicio1-boilerplate.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Exercícios de Posicionamento e Display</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <style>
+        /* estilos básicos */
+        body {
+            font-family: sans-serif;
+            margin: 20px;
+            padding-bottom: 200px;
+        }
+
+        h3 {
+            border-bottom: 2px solid #ccc;
+            padding-bottom: 5px;
+        }
+
+        .caixa-display,
+        .caixa-position {
+            border: 1px solid black;
+            padding: 10px;
+            margin: 5px;
+            width: 100px;
+            height: 50px;
+            text-align: center;
+            line-height: 50px;
+        }
+
+        .exercicio-display {
+            background-color: #f0f0f0;
+            padding: 10px;
+        }
+    </style>
+</head>
+
+<body>
+    <section class="exercicio-display">
+        <h3>Exercício 1: Tipos de Exibição</h3>
+        <p class="caixa-display item-a">Item A</p>
+        <span class="caixa-display item-b">Item B</span>
+        <div class="caixa-display item-c">Item C</div>
+    </section>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/dia-01/08-posicionamento/_assets/02-exercicio2-boilerplate.html b/dia-01/08-posicionamento/_assets/02-exercicio2-boilerplate.html
new file mode 100644
index 0000000..48e770f
--- /dev/null
+++ b/dia-01/08-posicionamento/_assets/02-exercicio2-boilerplate.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Exercícios de Posicionamento e Display</title>
+    <link rel="stylesheet" href="styles.css">
+
+    <style>
+        /* estilos básicos */
+        body {
+            font-family: sans-serif;
+            margin: 20px;
+            padding-bottom: 200px;
+        }
+
+        h3 {
+            border-bottom: 2px solid #ccc;
+            padding-bottom: 5px;
+        }
+
+        .caixa-position {
+            border: 1px solid black;
+            padding: 10px;
+            margin: 5px;
+            width: 100px;
+            height: 50px;
+            text-align: center;
+            line-height: 50px;
+        }
+
+        .container-position {
+            background-color: #e0e0ff;
+            height: 200px;
+            width: 300px;
+            margin: 30px auto;
+            border: 3px dashed blue;
+        }
+
+        .caixa-position {
+            width: 80px;
+            height: 80px;
+            line-height: 80px;
+            margin: 0;
+        }
+
+        .caixa1 {
+            background-color: lightgreen;
+        }
+
+        .caixa2 {
+            background-color: salmon;
+        }
+
+        .caixa3 {
+            background-color: lightskyblue;
+        }
+
+        .menu-fixo {
+            background-color: #333;
+            color: white;
+            text-align: center;
+            padding: 10px;
+            width: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <section class="exercicio-position">
+        <h3>Exercício 2: Position e z-index</h3>
+        <div class="container-position">
+            <div class="caixa-position caixa1">Caixa 1</div>
+            <div class="caixa-position caixa2">Caixa 2</div>
+            <div class="caixa-position caixa3">Caixa 3</div>
+        </div>
+        <p class="menu-fixo">Menu Fixo (Rolar para ver)</p>
+
+        <div style="height: 1000px;"></div>
+    </section>
+
+</body>
+</html>
\ No newline at end of file