diff --git a/Temporario/Rascunho.css b/Temporario/Rascunho.css
new file mode 100644
index 0000000..be110e2
--- /dev/null
+++ b/Temporario/Rascunho.css
@@ -0,0 +1,98 @@
+*{
+    border: none;
+    margin: 0px;
+    padding: 0px;
+    box-sizing: border-box;
+}
+.divBase{
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    flex-direction: column;
+    width: 100%;
+    height: 100vh;
+}
+.divHead{
+    display: flex;
+    align-items: flex-start;
+    justify-content: column;
+    width: 100%;
+    background-color: rgb(97, 110, 226);
+}
+.divParte1{
+    display: flex;
+    align-items: flex-start;
+    justify-content: column;
+    width: 100%;
+    background-color: red;
+}
+.divGrupo1{
+    display: flex;
+    align-items: flex-start;
+    justify-content: column;
+    flex-direction: row;
+    width: 100%;
+}
+.divParte2E{
+    display: flex;
+    align-items: flex-start;
+    justify-content: column;
+    flex-direction: column;
+    width: 50%;
+    background-color: blue;
+    padding: 0 20px 0 20px;    
+}
+.h1TextAera{
+    display: flex;
+    width: 100%;
+    height: 500px;    
+}
+.divParte2D{
+    display: flex;
+    align-items: flex-start;
+    justify-content: column;
+    flex-direction: column;
+    width: 50%;
+    background-color: rgb(0, 255, 34);    
+    padding: 0 20px 0 20px;
+}
+.h2TextAera{
+    display: flex;
+    width: 100%;
+    height: 500px;    
+}
+.divBotoes{
+    display: flex;
+    align-items: flex-start;
+    justify-content: column;
+    background-color: aquamarine;
+    width: 100%;
+}
+.divDbGrid{
+    display: flex;
+    align-items: flex-start;
+    justify-content: column;
+    background-color: rgb(255, 255, 255);
+    width: 100%;    
+}
+.divConteudo{
+    display: flex;
+    align-items: flex-start;
+    justify-content: column;    
+    background-color: rgb(213, 228, 130);
+    width: 100%;        
+}
+.styBtn{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px;
+    cursor: pointer;
+    padding: 5px;
+    width: 100px;
+    background-color: #248;
+    color: white;
+    border: 1px solid;
+    border-color: #999 #000 #000 #999;
+}
\ No newline at end of file
diff --git a/Temporario/Rascunho.html b/Temporario/Rascunho.html
new file mode 100644
index 0000000..2e6569a
--- /dev/null
+++ b/Temporario/Rascunho.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html >
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name= "description" content="classe que gera uma data Grid, fornecendo um objeto de configurações e um aquivo json">
+    <meta name="keywords" content="HTML, CSS, JavaScript, DataGrid, Class">
+    <link rel="shortcut icon" type="image/jpg" href="./img/favicon.ico"/>
+    <title>Data Grid </title>
+    <link rel="stylesheet" content="text/css" href="Rascunho.css" />
+</head>
+<body>
+    <div id="divBase" class="divBase">
+        <div id="divHead" class="divHead">
+            <h2> Head de página </h2>
+        </div>        
+        <div id="divParte1" class="divParte1">
+            <h2> Teste de página </h2>
+        </div>
+        <div id="divGrupo1" class="divGrupo1">
+            <div id="divParte2E" class="divParte2E">
+                <H2>Esquerda</H2>
+                <textarea id="h1TextArea" class="h1TextAera" spellcheck="false" wrap= "off">
+                    
+                </textarea>                
+            </div>
+            <div id="divParte2D" class="divParte2D">
+                <H2>Direita</H2>
+                <textarea id="h2TextArea" class="h2TextAera" spellcheck="false">
+                    
+                </textarea>
+            </div>
+        </div>
+        <div id="divBotoes" class="divBotoes">
+            <H2>Botões</H2>
+            <input id="btnGerar" class="styBtn" type="button" value="Gerar"/>
+            <input id="btnClasse" class="styBtn" type="button" value="Baixar Classe"/>
+            <input id="btnObjeto" class="styBtn" type="button" value="Baixar Objeto"/>
+        </div>
+        <div id="divDbGrid" class="divDbGrid">
+            <H2>Grid</H2>
+        </div>
+        <div id="divConteudo" class="divConteudo">
+            <H2>Conteúdo</H2>
+            <pre id="testex" >
+                <cod id="teste">
+
+                </cod>
+                
+            </pre>
+        </div>
+    </div>
+</body>
+<script src="./index.js" type="module"></script>
+</html>
\ No newline at end of file
diff --git a/index.js b/Temporario/index.js
similarity index 99%
rename from index.js
rename to Temporario/index.js
index d5f8249..80a28e5 100644
--- a/index.js
+++ b/Temporario/index.js
@@ -1,4 +1,4 @@
-import { DataGrid } from "./src/dataGrid.js"; 
+import { DataGrid } from "../src/dataGrid.js"; 
 const divBase = document.querySelector('#divBase')
 const divHead = document.querySelector('#divHead')
 const divParte1 = document.querySelector('#divParte1')
diff --git a/index.css b/index.css
index be110e2..1fa8a99 100644
--- a/index.css
+++ b/index.css
@@ -4,6 +4,21 @@
     padding: 0px;
     box-sizing: border-box;
 }
+h1
+{
+    font-family: "Inter", sans-serif;
+    font-size: 40px;
+    font-weight: 600;
+}
+
+h2 
+{
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+}
+
+
 .divBase{
     display: flex;
     align-items: flex-start;
diff --git a/index.html b/index.html
index 22f7442..497edeb 100644
--- a/index.html
+++ b/index.html
@@ -1,56 +1,62 @@
-<!DOCTYPE html >
-<html lang="pt-BR">
+<!DOCTYPE html>
+<html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name= "description" content="classe que gera uma data Grid, fornecendo um objeto de configurações e um aquivo json">
-    <meta name="keywords" content="HTML, CSS, JavaScript, DataGrid, Class">
-    <link rel="shortcut icon" type="image/jpg" href="./img/favicon.ico"/>
-    <title>Data Grid </title>
-    <link rel="stylesheet" content="text/css" href="index.css" />
+<meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name= "description" content="classe que gera uma data Grid, fornecendo um objeto de configurações e um aquivo json">
+        <meta name="keywords" content="HTML, CSS, JavaScript, DataGrid, Class">
+        <link rel="shortcut icon" type="image/jpg" href="./img/favicon.ico"/>
+        <title>Data Grid </title>
+        <link rel="stylesheet" content="text/css" href="index.css" />
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
 </head>
 <body>
-    <div id="divBase" class="divBase">
-        <div id="divHead" class="divHead">
-            <h2> Head de página </h2>
-        </div>        
-        <div id="divParte1" class="divParte1">
-            <h2> Teste de página </h2>
-        </div>
-        <div id="divGrupo1" class="divGrupo1">
-            <div id="divParte2E" class="divParte2E">
-                <H2>Esquerda</H2>
-                <textarea id="h1TextArea" class="h1TextAera" spellcheck="false" wrap= "off">
-                    
-                </textarea>                
-            </div>
-            <div id="divParte2D" class="divParte2D">
-                <H2>Direita</H2>
-                <textarea id="h2TextArea" class="h2TextAera" spellcheck="false">
-                    
-                </textarea>
-            </div>
-        </div>
-        <div id="divBotoes" class="divBotoes">
-            <H2>Botões</H2>
-            <input id="btnGerar" class="styBtn" type="button" value="Gerar"/>
-            <input id="btnClasse" class="styBtn" type="button" value="Baixar Classe"/>
-            <input id="btnObjeto" class="styBtn" type="button" value="Baixar Objeto"/>
-        </div>
-        <div id="divDbGrid" class="divDbGrid">
-            <H2>Grid</H2>
-        </div>
-        <div id="divConteudo" class="divConteudo">
-            <H2>Conteúdo</H2>
-            <pre id="testex" >
-                <cod id="teste">
-
-                </cod>
+    <header></header>
+    <main>
+        <section class="MainContent">
+            <h1>DataGrid</h1>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque culpa repellendus, temporibus quo quidem blanditiis maxime iste fugit! Deleniti, ab voluptatibus voluptatum corporis quibusdam vitae soluta expedita mollitia assumenda deserunt?</p>
+            <h2>Value</h2>
+            <p>A string</p>
+            <p>Its value is determined as follows:</p>
+            <ul>
+                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam tempora, exercitationem laudantium non, quibusdam id atque reiciendis odit earum iste distin</li>
+                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam tempora, exercitationem laudantium non, quibusdam id atque reiciendis odit earum iste distin</li>
+                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam tempora, exercitationem laudantium non, quibusdam id atque reiciendis odit earum iste distin</li>
+                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam tempora, exercitationem laudantium non, quibusdam id atque reiciendis odit earum iste distin</li>
+                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam tempora, exercitationem laudantium non, quibusdam id atque reiciendis odit earum iste distin</li>
+            </ul>
+            <a href="KeyValues.html">See a full list of key values.</a>
+            <section class="InteractiveContent">
+                <div id="divGrupo1" class="divGrupo1">
+                    <div id="divParte2E" class="divParte2E">
+                        <H2>Esquerda</H2>
+                        <textarea id="h1TextArea" class="h1TextAera" spellcheck="false" wrap= "off">
+                            
+                        </textarea>                
+                    </div>
+                    <div id="divParte2D" class="divParte2D">
+                        <H2>Direita</H2>
+                        <textarea id="h2TextArea" class="h2TextAera" spellcheck="false">
+                            
+                        </textarea>
+                    </div>
+                </div>
+                <div id="divBotoes" class="divBotoes">
+                    <H2>Botões</H2>
+                    <input id="btnGerar" class="styBtn" type="button" value="Gerar"/>
+                    <input id="btnClasse" class="styBtn" type="button" value="Baixar Classe"/>
+                    <input id="btnObjeto" class="styBtn" type="button" value="Baixar Objeto"/>
+                </div>
                 
-            </pre>
-        </div>
-    </div>
+            </section>
+        </section>
+
+    </main>
+    <footer></footer>
 </body>
-<script src="./index.js" type="module"></script>
+<script src="Temporario/index.js" type="module"></script>
 </html>
\ No newline at end of file
