diff --git a/index.html b/index.html
index 2b307a6..ba812f9 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,7 @@
Home
Projetos
Contato
+
Produtos
@@ -33,7 +34,7 @@
O teu problema resolvido na web com alta performance.
Trabalho com diversas tecnologias, mas estas são as minhas preferidas:
-
+
- HTML5
- CSS3
- LESS
diff --git a/produtos.html b/produtos.html
new file mode 100644
index 0000000..06143ac
--- /dev/null
+++ b/produtos.html
@@ -0,0 +1,87 @@
+
+
+
+ Tritão
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | Produto |
+ Categoria |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/projects.html b/projects.html
index 7836e27..9a1f77f 100644
--- a/projects.html
+++ b/projects.html
@@ -18,6 +18,7 @@
- Home
- Projetos
- Contato
+ - Produtos
diff --git a/scripts/main.js b/scripts/main.js
index 54887d7..077088d 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -1,11 +1,41 @@
-//alert('Ola do JavaScript');
-/**
-console.warn('Alerta de teste...');
-console.error('Aconteceu um erro!');
-console.log('Mensagem de log geral...');
-*/
-
-const logo = document.querySelector('div.logo');
-logo.style.border = '2px solid yellow';
+const tecnologiasPreferidasList = `HTML5
+CSS3
+LESS
+JavaScript
+ReactJS
+Netuno
+PostgreSQL
+Linux
+GIT`.split('\n');
+
+console.info('Minhas tecnologias preferidas:', tecnologiasPreferidasList);
+
+if (document.getElementById('tecnologiasPreferidas')) {
+ document.getElementById('tecnologiasPreferidas').innerHTML = '- '+ tecnologiasPreferidasList.join('
- ') + '
';
+}
+
+function processaBackend(url, callback) {
+ const http = new XMLHttpRequest();
+ http.onreadystatechange = function() {
+ if (this.readyState == 4) {
+ console.log('Foi no BACKEND e VOLTOU!');
+ console.warn('Resposta do BACKEND em STRING: ', this.responseText);
+ const dados = JSON.parse(this.responseText);
+ if (callback) {
+ callback(dados);
+ }
+ }
+ };
+ console.log('CHAMA O BACKEND!!!!');
+ http.open("GET", url, true);
+ http.send();
+ console.log('ENVIOU!!!!')
+ return 'JSON..'
+}
+
+
+function criarProduto() {
+ alert('Vai Criar o Produto...');
+}
diff --git a/styles/_header.less b/styles/_header.less
index 8add001..51ca825 100644
--- a/styles/_header.less
+++ b/styles/_header.less
@@ -1,3 +1,6 @@
+
+@import "./_variables.less";
+
/* Header styling */
header {
background-color: #333333;
@@ -12,7 +15,7 @@ header {
@media (min-width: 400px) and (max-width: 800px) {
header {
- background-color: red;
+ background-color: @minhaCorBase;
}
}
@@ -38,15 +41,15 @@ nav ul li {
}
nav ul li a {
- color: #12A89D;
+ color: @minhaCorBase;
text-decoration: none;
padding: 10px;
border-radius: 5px;
}
nav ul li a.active {
- background-color: #12A89D;
- box-shadow: 0 0 2px #12A89D;
+ background-color: darken(@minhaCorBase, 30%);
+ box-shadow: 0 0 2px @minhaCorBase;
color: #d1f9e9;
}
@@ -54,6 +57,6 @@ nav ul li a:hover {
transition: 0.5s ease-in;
color: #d1f9e9;
background-color: #222222;
- box-shadow: 0 0 10px 5px #12A89D;
+ box-shadow: 0 0 10px 5px @minhaCorBase;
}
diff --git a/styles/_variables.less b/styles/_variables.less
new file mode 100644
index 0000000..db5e4ea
--- /dev/null
+++ b/styles/_variables.less
@@ -0,0 +1,3 @@
+
+@minhaCorBase: #12A89D;
+
diff --git a/styles/blocks/_table.less b/styles/blocks/_table.less
index a73ab7e..375eaff 100644
--- a/styles/blocks/_table.less
+++ b/styles/blocks/_table.less
@@ -1,22 +1,24 @@
table {
border: solid 1px #12A89D;
-}
-table a {
- color: #12A89D;
- text-decoration: none;
- font-weight: bold;
-}
+ a {
+ color: #12A89D;
+ text-decoration: none;
+ font-weight: bold;
+ }
-table > thead > tr,
-table > tfoot > tr {
- background-color: #d1f9e9;
-}
+ > thead,
+ > tfoot {
+ > tr {
+ background-color: orange;
+ }
+ }
-table > thead > tr > th,
-table > tfoot > tr > th,
-table > tbody > tr > td {
- text-align: left;
- padding: 10px;
+ > thead > tr > th,
+ > tfoot > tr > th,
+ > tbody > tr > td {
+ text-align: left;
+ padding: 10px;
+ }
}