diff --git a/apirest/frontend/index.html b/apirest/frontend/index.html
new file mode 100644
index 0000000..7ad46b2
--- /dev/null
+++ b/apirest/frontend/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+ Produtos
+
+
+
+ Lista de produtos
+
+
+
+
+
+ | Nome |
+ Preço |
+ Estoque |
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apirest/frontend/script.js b/apirest/frontend/script.js
new file mode 100644
index 0000000..5a002b3
--- /dev/null
+++ b/apirest/frontend/script.js
@@ -0,0 +1,20 @@
+async function carregarProdutos(){
+ const resposta = await fetch("http://localhost:5000/produtos");
+ if (!resposta.ok){
+ throw new Error("Não foi possível carregar a lista")
+ }
+ const produtos = await resposta.json();
+ let tbody = document.querySelector("tbody");
+ produtos.forEach(produto => {
+ let linha = document.createElement("tr");
+ linha.innerHTML = ` ${produto.nome} |
+ ${produto.preco} |
+ ${produto.estoque} |
+ `
+ tbody.appendChild(linha);
+ });
+}
+
+window.addEventListener("load", () => {
+ carregarProdutos();
+})
\ No newline at end of file
diff --git a/apirest/frontend/style.css b/apirest/frontend/style.css
new file mode 100644
index 0000000..0cf029c
--- /dev/null
+++ b/apirest/frontend/style.css
@@ -0,0 +1,24 @@
+/*
+ Seletor {
+ propriedade1 : valor;
+ propriedade2 : valor;
+ ...
+ propriedadeN : valor;
+ }
+*/
+
+
+/* CSS de RESET */
+* {
+ margin : 0;
+ padding: 0;
+}
+
+h1 {
+ width : 300px;
+ background-color: brown;
+ padding: 20px;
+ border: 10px solid black;
+ text-align: center;
+ margin: 0 auto;
+}
\ No newline at end of file