# MODELO_TESTE

# nova página - modelo

<table id="bkmrk-meu-t%C3%ADtulo-meu-t%C3%ADtul"> <columm1>### Meu título

  
 <columm2>![logo_mr_200px.png](https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/scaled-1680-/Fxelogo-mr-200px.png)

</columm2></columm1>### Meu título

Meu parágrafo

</table>

## TEXTO

```
  Usando `crase` dentro da marcação de código.

```

Visite nosso canal [![youtubeicone.png](https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/scaled-1680-/1Duyoutubeicone.png)](https://www.youtube.com/@mercadorental)

\[Markdown - Wikipedia\].🔗 [1](https://www.youtube.com/@mercadorental)

**negrito**

*itálico*

 itálico \*\*negrito\*\*

---

### Precisa de ajuda? Entre em contato através de um dos canais abaixo 👇

[![WhatsApp logo.png](https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/scaled-1680-/whatsapp-logo.png)](https://wa.me/+555521982160001?text=Comercial%20Mercado%20Rental)

🔗

# Configurando funções de usuários

<style id="bkmrk-body-%7B---font-body%3A-">
  body {
    --font-body: 'Noto Serif', serif;
    --font-heading: 'Roboto', sans-serif;
    --font-code: 'Source Code Pro', monospace;
  }
</style></head><body><table id="bkmrk-lorem-ipsum-dolor-si"> <tr> <td> ![](https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/scaled-1680-/Fxelogo-mr-200px.png)##  **Lorem ipsum dolor sit amet, consectetur adipiscing elit**

 </td> </tr> </table>

# Modelo 2

# 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

 Este texto está em VERMELHO e em NEGRITO.

 Este texto está em azul e itálico.

 Este texto está em verde e sublinhado.

 Este texto está em laranja e tem um tamanho de fonte maior.

 Este texto está em roxo com o fundo amarelo.

 Este texto está em roxo negrito com fundo azul claro e centralizado.

 Este texto está em verde escuro negrito com fundo amarelo claro e alinhado à direita.

#### 1.2 Fontes

 Este texto está usando a fonte 'Times New Roman' com serifa.

 Este texto está usando a fonte Arial, uma fonte sem serifa.

 Este texto está usando a fonte 'Courier New', uma fonte monoespaçada.

 Este texto está usando a fonte 'Comic Sans MS', que é uma fonte cursiva.

 Este texto está usando a fonte 'Papyrus', uma fonte do tipo fantasia.

 Se você quiser explorar mais opções de fontes para usar no CSS, visite esta página com uma lista completa de nomes de `font-family`: [Lista de Fontes Web Seguras](https://www.w3schools.com/cssref/css_websafe_fonts.asp).

### 2. Imagens

Abaixo, você verá uma imagem de exemplo:

#### 2.1 Texto com Imagem ao Lado

<div id="bkmrk-este-%C3%A9-um-exemplo-de-1" style="display: flex; align-items: center; width: 100%;"> <div style="flex: 1; padding-right: 10px;"> 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.

 </div> <div style="flex: 0 0 150px;"> [ ![Imagem ao lado do texto](https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/image.jpeg) ](https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/image.jpeg) </div></div>#### 2.2 Texto com Imagem ao Lado seguido de mais Texto

<div id="bkmrk-este-%C3%A9-um-exemplo-de-2" style="display: flex; align-items: center; width: 100%;"> <div style="flex: 1; padding-right: 20px;"> 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.

 </div> <div style="flex: 0 0 150px;"> [ ![Imagem ao lado do texto](https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/scaled-1680-/image.jpeg) ](https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/image.jpeg) </div></div><div id="bkmrk-agora%2C-temos-mais-te" style="width: 100%; margin-top: 20px;"> 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.

</div>##### 2.3.1 Bordas em Imagem

- **Borda Sólida**  
    ![](https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/image.jpeg)
- **Borda Tracejada**  
    ![](https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/image.jpeg)
- **Borda Pontilhada**  
    ![](https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/image.jpeg)
- **Borda Dupla**  
    ![](https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/image.jpeg)
- **Borda Groove**  
    ![](https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/image.jpeg)
- **Borda Arredondada**  
    ![](https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/image.jpeg)

##### 2.3.2 Borda em Texto e Imagem

<div id="bkmrk-aten%C3%A7%C3%A3o%3A-esta-se%C3%A7%C3%A3o-" style="border: 3px solid red; padding: 15px; margin: 10px;">**Atenção: Esta seção contém uma imagem importante e um texto explicativo.**

 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.

![Imagem de Exemplo](https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/image.jpeg)</div><div id="bkmrk-este-%C3%A9-um-exemplo-de-3" style="display: flex; align-items: center; width: 100%; border: 10px solid red; padding: 10px;"> <div style="flex: 1; padding-right: 10px;"> 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.

 </div> <div style="flex: 0 0 150px;"> [ ![Imagem ao lado do texto](https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/image.jpeg) ](https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/image.jpeg) </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" id="bkmrk-"> <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/CdmDDjnfg_U" width="560"></iframe>

</div>#### 3.2 Vídeo do YouTube Incorporado ao lado

<div id="bkmrk-este-%C3%A9-um-exemplo-de-4" style="display: flex; align-items: center;"> <div style="flex: 1;"> 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.

 </div> <div style="flex: 1;"> <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; 
      gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/CdmDDjnfg_U" width="420"></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 id="bkmrk-clique-para-ver-mais"> <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 id="bkmrk-whatsapp-mercado-ren" style="display: flex; gap: 20px;"> [![WhatsApp](https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg)WhatsApp ](https://api.whatsapp.com/send?phone=NUMERO_DO_TELEFONE)

[![Site](https://wiki.mercadorental.com.br/uploads/images/gallery/2024-10/scaled-1680-/logo-mr-200px.png)Mercado Rental ](https://www.mercadorental.com.br)

[Volte ao Site ](https://www.mercadorental.com.br)

[Explore no Site ](https://www.mercadorental.com.br/explorar)

[![Instagram](https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png)Instagram ](https://www.instagram.com/mercadorental)

</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. **``** - 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"`