diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..d08b62e
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,215 @@
+@import url('https://fonts.googleapis.com/css?family=Courgette|Roboto');
+
+*{
+ box-sizing: border-box;
+ margin:0;
+ padding:0;
+ font-family: 'Roboto', sans-serif;
+}
+
+.flex{
+ display: flex;
+}
+
+.center{
+ justify-content: center;
+}
+
+.vCenter{
+ align-items: center;
+}
+
+.row{
+ flex-direction:row;
+}
+
+.column{
+ flex-direction:column;
+}
+
+.between{
+ justify-content: space-between;
+}
+
+.around{
+ justify-content: space-around;
+}
+
+header{
+ height: 50px;
+ background-color: #ee5253;
+}
+
+.logo{
+ height: 100%;
+ margin-left: 15px;
+
+}
+
+.logo img{
+ height: 70%;
+ margin-right:5px;
+}
+
+.logo figurecaption{
+ color:white;
+ font-size:1.15em;
+ font-family: 'Courgette', cursive;
+}
+
+header .contentInput{
+ flex:1;
+}
+
+
+header .contentInput input{
+ height: 30px;
+ width: 30%;
+ border:0;
+ padding-left: 5px;
+ border-radius:3px 0 0 3px;
+ outline:none;
+ color:rgba(0,0,0,0.85);
+}
+
+header .contentInput img{
+ height: 30px;
+ width: 30px;
+ padding: 5px;
+ background-color: white;
+ border-radius:0 3px 3px 0;
+ cursor:pointer;
+}
+
+main{
+ height: calc(100vh - 50px);
+}
+
+.mainContent{
+ flex:1;
+}
+
+nav{
+ min-height: 100%;
+ width: 200px;
+ background-color:#222f3e;
+ color: white;
+ list-style-type: none;
+ padding:20px 10px;
+}
+
+nav .perfilContent{
+ width:100%;
+ margin-bottom: 15px;
+}
+
+nav .perfilContent img{
+ width:70%;
+ border-radius:150px;
+ object-fit: cover;
+ margin-bottom: 7px;
+}
+
+nav hr{
+ height: 1px;
+ width: 100%;
+ border: 1px dashed white;
+ margin:16px 0;
+}
+
+nav ul{
+ background-color: rgba(255,255,255,0.1);
+ border-radius:4px;
+}
+
+nav ul li{
+ padding:7px 10px;
+ cursor:pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+nav figure{
+ font-size:14px;
+}
+
+nav figure img{
+ width:15px;
+ margin-right: 5px;
+}
+
+section{
+ padding: 15px 25px;
+ color:rgba(0,0,0,0.7);
+ overflow-y: auto;
+}
+
+section:nth-child(1){
+ height: 50%;
+ background-color: #fafafa;
+
+}
+section:nth-child(2){
+ border-left:1px solid #ddd;
+ height:50%;
+ background-color: #f3f3f3;
+}
+
+#info{
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ margin-top: 20px;
+}
+
+#info p{
+ text-align: center;
+}
+
+#info p:not(:first-child){
+ margin-left:10px;
+}
+
+section h2{
+ text-align:center;
+ font-size:18px;
+
+}
+
+
+table{
+ width: 100%;
+ margin-top: 20px;
+ border-spacing: 0;
+}
+
+tr{
+ border-bottom:1px dashed #ddd;
+ text-align: center;
+ padding: 8px 5px;
+
+}
+
+tbody tr:nth-child(even), thead tr{
+ background-color: #eee;
+}
+
+tbody tr{
+ cursor:pointer;
+}
+
+td, th{
+ flex:4;
+ vertical-align: middle;
+ text-align: center;
+ border:0;
+ padding: 7px;
+}
+
+
+.cellWithoutSize{
+ flex:1;
+}
+
diff --git a/img/ballot-outline.svg b/img/ballot-outline.svg
new file mode 100644
index 0000000..b383033
--- /dev/null
+++ b/img/ballot-outline.svg
@@ -0,0 +1 @@
+
diff --git a/img/logo.svg b/img/logo.svg
new file mode 100644
index 0000000..5e8e1a7
--- /dev/null
+++ b/img/logo.svg
@@ -0,0 +1,51 @@
+
+
+
diff --git a/img/perfil.svg b/img/perfil.svg
new file mode 100644
index 0000000..651b41c
--- /dev/null
+++ b/img/perfil.svg
@@ -0,0 +1,215 @@
+
+
+
+
diff --git a/img/search.svg b/img/search.svg
new file mode 100644
index 0000000..7a3c321
--- /dev/null
+++ b/img/search.svg
@@ -0,0 +1 @@
+
diff --git a/img/user.svg b/img/user.svg
new file mode 100644
index 0000000..04f7b43
--- /dev/null
+++ b/img/user.svg
@@ -0,0 +1 @@
+
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..cf631e6
--- /dev/null
+++ b/index.html
@@ -0,0 +1,64 @@
+
+
+
+ nKey
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Lista de usuários
+
+
+
+ ID |
+ Nome |
+ Email |
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/script.js b/js/script.js
new file mode 100644
index 0000000..235bb9f
--- /dev/null
+++ b/js/script.js
@@ -0,0 +1,230 @@
+var abaActived = 0;
+var full = [];
+var search = [];
+
+showUsersTable();
+
+searchInput.onkeyup = function(){
+ search = [];
+ if(abaActived == 0){
+ full.map(
+ function(item, index){
+ if(item.id.toString().toLowerCase().indexOf(searchInput.value.toLowerCase()) != -1 || item.name.toLowerCase().indexOf(searchInput.value.toLowerCase()) != -1 || item.email.toLowerCase().indexOf(searchInput.value.toLowerCase()) != -1){
+ search.push(item);
+ }
+ });
+ mountTableUser(search);
+ }else{
+ full.map(
+ function(item, index){
+ if(item.id.toString().toLowerCase().indexOf(searchInput.value.toLowerCase()) != -1 || item.title.toLowerCase().indexOf(searchInput.value.toLowerCase()) != -1){
+ search.push(item);
+ }
+ });
+ mountTablePublication(search);
+ }
+}
+
+abaUsers.onclick = function(){
+ showUsersTable();
+ abaActived = 0;
+ searchInput.value = "";
+}
+
+abaPublications.onclick = function(){
+ showPublicationTable();
+ abaActived = 1;
+ searchInput.value = "";
+}
+
+function showUsersTable(){
+ httpRequest = new XMLHttpRequest();
+
+ httpRequest.open('GET', 'https://jsonplaceholder.typicode.com/users');
+ httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+ httpRequest.onreadystatechange = function(){
+ if(httpRequest.readyState === 4){
+ var data = JSON.parse(httpRequest.responseText);
+ titulo.innerHTML = "Lista de usuários";
+ mountTableUser(data);
+ full = data;
+ }
+ };
+
+ httpRequest.send();
+}
+
+function showPublicationTable(){
+ httpRequest = new XMLHttpRequest();
+
+ httpRequest.open('GET', 'https://jsonplaceholder.typicode.com/posts');
+ httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+ httpRequest.onreadystatechange = function(){
+ if(httpRequest.readyState === 4){
+ var data = JSON.parse(httpRequest.responseText);
+ titulo.innerHTML = "Lista de publicações";
+ mountTablePublication(data);
+ full = data;
+ }
+ };
+
+ httpRequest.send();
+}
+
+function mountTableUser(data){
+
+ var thead = document.getElementById("users-thead");
+ while(thead.lastChild){
+ thead.removeChild(thead.lastChild);
+ }
+ var tbody = document.getElementById("users");
+ while(tbody.lastChild){
+ tbody.removeChild(tbody.lastChild);
+ }
+ while(info.lastChild){
+ info.removeChild(info.lastChild);
+ }
+
+ if(!data.length){
+ var tr = document.createElement("tr");
+ var tdNothig = document.createElement("td");
+ tdNothig.innerHTML = "Nenhum resultado encontrado."
+ tr.appendChild(tdNothig);
+ tbody.appendChild(tr);
+ }
+
+ for(var i = 0; i