# Criando e editando funções de usuários

# Bem-vindo à Minha Página Markdown

Este é um exemplo de uma página construída com Markdown. Aqui você encontrará a formatação de texto, imagens, vídeos, seções organizadas, links e botões.

### 1. Exemplo de Texto

#### 1.1 Cores e Formatação

<p style="color: red; font-weight: bold;">
  Este texto está em VERMELHO e em NEGRITO.
</p>

<p style="color: blue; font-style: italic;">
  Este texto está em azul e itálico.
</p>

<p style="color: green; text-decoration: underline;">
  Este texto está em verde e sublinhado.
</p>

<p style="color: orange; font-size: 20px;">
  Este texto está em laranja e tem um tamanho de fonte maior.
</p>

<p style="color: purple; background-color: yellow; padding: 5px;">
  Este texto está em roxo com o fundo amarelo.
</p>

<p style="color: purple; background-color: lightblue; padding: 5px; text-align: center; font-weight: bold;">
  Este texto está em roxo negrito com fundo azul claro e centralizado.
</p>

<p style="color: darkgreen; background-color: lightyellow; padding: 5px; text-align: right; font-weight: bold;">
  Este texto está em verde escuro negrito com fundo amarelo claro e alinhado à direita.
</p>

#### 1.2 Fontes

 <p style="font-family: 'Times New Roman', Times, serif;">
    Este texto está usando a fonte 'Times New Roman' com serifa.
  </p>

  <p style="font-family: Arial, Helvetica, sans-serif;">
    Este texto está usando a fonte Arial, uma fonte sem serifa.
  </p>

  <p style="font-family: 'Courier New', Courier, monospace;">
    Este texto está usando a fonte 'Courier New', uma fonte monoespaçada.
  </p>

  <p style="font-family: 'Comic Sans MS', cursive;">
    Este texto está usando a fonte 'Comic Sans MS', que é uma fonte cursiva.
  </p>

  <p style="font-family: Papyrus, fantasy;">
    Este texto está usando a fonte 'Papyrus', uma fonte do tipo fantasia.
  </p>

   <p>
    Se você quiser explorar mais opções de fontes para usar no CSS, visite esta página com uma lista completa de nomes de <code>font-family</code>: 
    <a href="https://www.w3schools.com/cssref/css_websafe_fonts.asp" target="_blank">Lista de Fontes Web Seguras</a>.
  </p>


### 2. Imagens

Abaixo, você verá uma imagem de exemplo:

#### 2.1 Texto com Imagem ao Lado

<div style="display: flex; align-items: center; width: 100%;">
  
  <!-- Texto à esquerda -->
  <div style="flex: 1; padding-right: 10px;">
    <p>
      Este é um exemplo de como alinhar uma imagem personalizada ao lado de um texto, ocupando toda a largura disponível.
      Usamos HTML e CSS para criar essa estrutura flexível. Você pode ajustar o tamanho da imagem e o layout conforme necessário.
    </p>
  </div>
  
  <!-- Imagem à direita com tamanho 150x150 -->
  <div style="flex: 0 0 150px;">
    <a href="https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/image.jpeg">
      <img src="https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/image.jpeg" 
           alt="Imagem ao lado do texto" 
           style="width: 150px; height: 150px;">
    </a>
  </div>

</div>


#### 2.2 Texto com Imagem ao Lado seguido de mais Texto

<div style="display: flex; align-items: center; width: 100%;">
  
  <!-- Texto à esquerda -->
  <div style="flex: 1; padding-right: 20px;">
    <p>
      Este é um exemplo de como alinhar uma imagem personalizada ao lado de um texto, ocupando toda a largura disponível.
      Usamos HTML e CSS para criar essa estrutura flexível. A imagem e o texto juntos preenchem a largura da página.
    </p>
  </div>
  
  <!-- Imagem à direita com tamanho 150x150 -->
  <div style="flex: 0 0 150px;">
    <a href="https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/image.jpeg">
      <img src="https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/scaled-1680-/image.jpeg" 
           alt="Imagem ao lado do texto" 
           style="width: 150px; height: 150px;">
    </a>
  </div>

</div>

<!-- Mais texto abaixo preenchendo toda a largura -->
<div style="width: 100%; margin-top: 20px;">
  <p>
    Agora, temos mais texto que ocupa toda a largura da página. Esse segundo bloco de texto é totalmente independente 
    e não tem imagens ao lado, garantindo que ele preencha toda a largura. Você pode adicionar mais informações aqui,
    incluindo parágrafos longos, listas, ou qualquer outro tipo de conteúdo que você desejar.
  </p>
</div>

##### 2.3.1 Bordas em Imagem

- **Borda Sólida**  
  <img src="https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/image.jpeg" style="border: 5px solid black; width: 150px; height: 150px; margin: 10px;">

- **Borda Tracejada**  
  <img src="https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/image.jpeg" style="border: 5px dashed blue; width: 150px; height: 150px; margin: 10px;">

- **Borda Pontilhada**  
  <img src="https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/image.jpeg" style="border: 5px dotted red; width: 150px; height: 150px; margin: 10px;">

- **Borda Dupla**  
  <img src="https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/image.jpeg" style="border: 5px double green; width: 150px; height: 150px; margin: 10px;">

- **Borda Groove**  
  <img src="https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/image.jpeg" style="border: 5px groove purple; width: 150px; height: 150px; margin: 10px;">

- **Borda Arredondada**  
  <img src="https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/image.jpeg" style="border: 5px solid orange; border-radius: 15px; width: 150px; height: 150px; margin: 10px;">

##### 2.3.2 Borda em Texto e Imagem

<div style="border: 3px solid red; padding: 15px; margin: 10px;">

**Atenção: Esta seção contém uma imagem importante e um texto explicativo.**  

<p>
  Esta é uma seção que destaca uma borda em volta de uma imagem e texto para chamar atenção.
  A imagem representa o conteúdo visual relacionado ao texto.
</p>

<img src="https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/image.jpeg" alt="Imagem de Exemplo" style="width: 150px; height: 150px; border: 2px solid black; margin: 10px 0;">

</div>

<div style="display: flex; align-items: center; width: 100%; border: 10px solid red; padding: 10px;">

  <!-- Texto à esquerda -->
  <div style="flex: 1; padding-right: 10px;">
    <p>
      Este é um exemplo de como alinhar uma imagem personalizada ao lado de um texto, ocupando toda a largura disponível.
      Usamos HTML e CSS para criar essa estrutura flexível. Você pode ajustar o tamanho da imagem e o layout conforme necessário.
    </p>
  </div>
  
  <!-- Imagem à direita com tamanho 150x150 -->
  <div style="flex: 0 0 150px;">
    <a href="https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/image.jpeg">
      <img src="https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/image.jpeg" 
           alt="Imagem ao lado do texto" 
           style="width: 150px; height: 150px;">
    </a>
  </div>

</div>



### 3. Vídeo

#### 3.1 Vídeo do YouTube Incorporado abaixo

Aqui está um exemplo de como incorporar um vídeo do YouTube diretamente em sua página.

<div align="center">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/CdmDDjnfg_U" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

#### 3.2 Vídeo do YouTube Incorporado ao lado

<div style="display: flex; align-items: center;">
  
  <!-- Texto à esquerda -->
  <div style="flex: 1;">
    <p>
      Este é um exemplo de como alinhar um vídeo do YouTube ao lado de um texto. 
      Usamos HTML e CSS para criar essa estrutura flexível. Você pode ajustar o 
      tamanho do vídeo e o layout conforme necessário.
    </p>
  </div>
  
  <!-- Vídeo do YouTube à direita -->
  <div style="flex: 1;">
    <iframe width="420" height="315" src="https://www.youtube.com/embed/CdmDDjnfg_U" 
      frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; 
      gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>

</div>



### 4. Subtítulo com Lista

Aqui está uma lista de tópicos:

- **Markdown**
  - Sintaxe simples e fácil
  - Amplamente usado em projetos de código aberto
- **Imagens**
  - Inclua imagens com URLs
  - Suporte a formatos populares como `.png`, `.jpg`
- **Links**
  - Link para qualquer site
  - Use texto âncora descritivo

---

### 5. Detalhes

<details>
  <summary>Clique para ver mais detalhes</summary>
  Aqui estão os detalhes adicionais.
</details>

### 6. Emojis

Você pode usar emojis diretamente no seu conteúdo, copiando e colando os símbolos em sua plataforma de blog ou wiki. Para encontrar mais emojis, você pode visitar a [Emojipedia](https://emojipedia.org/).

⚠️ **Atenção**: Este é um aviso.  
✅ **Feito**: A tarefa foi completada.  
🎯 **Objetivo**: Alcançar a meta estipulada.



### 7. Entre em contato

#### 7.1 Links Úteis

Aqui estão alguns links úteis para você explorar:

- [Visite o Google](https://www.google.com)
- [Acesse o GitHub](https://www.github.com)
- [Confira a Documentação do Markdown](https://www.markdownguide.org)

#### 7.2 Entre em Contato - Botões

<div style="display: flex; gap: 20px;">

  <!-- Botão do WhatsApp -->
  <a href="https://api.whatsapp.com/send?phone=NUMERO_DO_TELEFONE" target="_blank" 
     style="background-color: #25D366; color: white; padding: 10px 20px; text-decoration: none; 
     border-radius: 5px; display: flex; align-items: center;">
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" 
         alt="WhatsApp" style="width: 24px; height: 24px; margin-right: 10px;">
    WhatsApp
  </a>

<!-- Botão do Site do Mercado Rental -->
<a href="https://www.mercadorental.com.br" target="_blank" 
   style="background-color: #007bff; color: white; padding: 10px 20px; text-decoration: none; 
   border-radius: 5px; display: flex; align-items: center;">
  <img src="https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/scaled-1680-/logo-mr-200px.png" 
       alt="Site" style="width: 24px; height: 24px; margin-right: 10px;">
  Mercado Rental
</a>

<!-- Botão "Volte ao Site" -->
<a href="https://www.mercadorental.com.br" target="_blank" 
   style="background-color: #007bff; color: white; padding: 10px 20px; text-decoration: none; 
   border-radius: 5px; display: inline-block; margin-right: 10px;">
  Volte ao Site
</a>

<!-- Botão "Explore no Site" -->
<a href="https://www.mercadorental.com.br/explorar" target="_blank" 
   style="background-color: #28a745; color: white; padding: 10px 20px; text-decoration: none; 
   border-radius: 5px; display: inline-block;">
  Explore no Site
</a>

<!-- Botão do Instagram -->
<a href="https://www.instagram.com/mercadorental" target="_blank" 
   style="background-color: #C13584; color: white; padding: 10px 20px; text-decoration: none; 
   border-radius: 5px; display: flex; align-items: center;">
  <img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png" 
       alt="Instagram" style="width: 24px; height: 24px; margin-right: 10px;">
  Instagram
</a>
</div>

### 8. Resumo

#### 8.1 Tags HTML:

1. **`<h1>` a `<h3>`** - Cabeçalhos utilizados para organizar o conteúdo por importância.
2. **`<p>`** - Parágrafos para estruturar o texto.
3. **`<a>`** - Links para redirecionamento para outra página ou site.
4. **`<img>`** - Inserção de imagens.
5. **`<div>`** - Divisão de seções ou blocos de conteúdo.
6. **`<ul>`** - Lista não ordenada (bullets).
7. **`<li>`** - Item de lista.
8. **`<iframe>`** - Embutir conteúdo externo, como vídeos do YouTube.
9. **`<details>` e `<summary>`** - Exibir/ocultar detalhes ao clicar.
10. **`<code>`** - Exibir código ou trechos de código.
11. **`<strong>`** - Destacar texto em negrito.
12. **`<em>`** - Destacar texto em itálico.
13. **`<img>`** - Aplicação de bordas a imagens.  
    - Exemplo: `<img src="url" style="border: 5px solid black;">`

#### 8.2 Atributos CSS:

1. **`color`** - Define a cor do texto.
   - Exemplo: `color: red;`

2. **`background-color`** - Define a cor de fundo.
   - Exemplo: `background-color: lightblue;`

3. **`font-weight`** - Define o peso da fonte (negrito).
   - Exemplo: `font-weight: bold;`

4. **`font-style`** - Define o estilo da fonte (normal, itálico).
   - Exemplo: `font-style: italic;`

5. **`text-decoration`** - Define a decoração do texto (sublinhado, etc.).
   - Exemplo: `text-decoration: underline;`

6. **`font-size`** - Define o tamanho da fonte.
   - Exemplo: `font-size: 20px;`

7. **`padding`** - Define o espaçamento interno de um elemento.
   - Exemplo: `padding: 5px;`

8. **`text-align`** - Define o alinhamento do texto (esquerda, centro, direita).
   - Exemplo: `text-align: center;`

9. **`font-family`** - Define a família de fontes.
   - Exemplo: `font-family: Arial, sans-serif;`

10. **`width` e `height`** - Define a largura e altura de elementos, como imagens e vídeos.
    - Exemplo: `width: 150px; height: 150px;`

11. **`display`** - Controla o layout do elemento (flex, block, inline, etc.).
    - Exemplo: `display: flex;`

12. **`align-items`** - Alinha os itens dentro de um contêiner flexível.
    - Exemplo: `align-items: center;`

13. **`flex`** - Define como o elemento deve se ajustar dentro de um contêiner flexível.
    - Exemplo: `flex: 1;`

14. **`border`** - Define o tipo, espessura e cor da borda de um elemento.
    - Exemplo: `border: 5px solid black;`

15. **`border-radius`** - Define os cantos arredondados de um elemento.
    - Exemplo: `border-radius: 5px;`

16. **`target`** - Especifica onde o link será aberto (`_blank` para abrir em nova aba).
    - Exemplo: `target="_blank"`