https://github.com/gabsouza-dev/starthtml

https://github.com/gabsouza-dev/starthtml

Last synced: 4 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/gabsouza-dev/starthtml
• Owner: gabsouza-dev
• License: mit
• Created: 2025-02-03T13:43:40.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-02-27T16:17:49.000Z (over 1 year ago)
• Last Synced: 2025-03-27T17:11:15.463Z (about 1 year ago)
• Language: CSS
• Homepage: https://start-html-beta.vercel.app
• Size: 22.5 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 🚀 Start HTML

Este é um pequeno projeto que permite ao usuário inserir código HTML em uma `textarea` e executá-lo em uma nova aba do navegador.

## 📂 Estrutura do Projeto

```

/startHTML

│── index.html   # Estrutura da página

│── style.css    # Estilos da página

└── script.js    # Lógica para abrir o HTML inserido em uma nova aba

```

## 🛠️ Tecnologias Utilizadas

- HTML5

- CSS3

- JavaScript (Vanilla JS)

## 📌 Funcionalidades

- ✅ Permite inserir código HTML em uma área de texto.

- ✅ Executa o código HTML em uma nova aba ao clicar em um botão.

- ✅ Interface responsiva e estilizada.

## 📥 Como Usar

1. Baixe ou clone este repositório.

2. Abra o arquivo `index.html` em um navegador.

3. Digite ou cole o código HTML na `textarea`.

4. Clique no botão **"Executar em Nova Aba"** para visualizar o código inserido.

## 👨🏻‍💻 Exemplo HTML, CSS e JS

- Utilize esse exemplo para visualizar a execução

  ```html

  

  

  

      

      

      Gabriel é Lindo <3

      

          body {

              margin: 0;

              overflow: hidden;

              background-color: #111;

          }

          .name {

              position: absolute;

              font-size: 48px;

              font-weight: bold;

              color: #000;

              font-family: Arial, sans-serif;

              pointer-events: none;

              text-shadow: 0 0 10px #ccc, 0 0 20px #333;

              transition: transform 0.1s linear;

          }

      

  

  

      
Gabriel é Lindo <3

      

          document.addEventListener("mousemove", (event) => {

              const nameElement = document.getElementById("name");

              nameElement.style.transform = `translate(${event.clientX}px, ${event.clientY}px)`;

          });

      

  

  

  ```


## 🎯 Melhorias Futuras

- Adicionar suporte a CSS e JavaScript dentro do código inserido.

- Criar uma opção para salvar e carregar códigos previamente usados.

## 📄 Licença

Este projeto está sob a licença MIT.