Ir ao conteúdo
  • Cadastre-se
MatthSmith

HTML Projeto Kanban Web simples utilizando Html, CSS, Js

Recommended Posts

HTML

<!DOCTYPE html>

<html>
 <head>
  <link rel="stylesheet" type="text/css" href="estilo.css">
   <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
	 	 
             <script>
	
	 </script>
	 
	 <body>	 
	  <table id="table">
				  <tr>				  
				   <td id="BRANCO" align="center"><img src="/ProjetoMeliora/post-it.png"></td>					   
				   <td id="todo" bgcolor="#FFF8DC">TO DO</td>
				   <td id="WIP" bgcolor="#FFFACD">WIP</td>
				   <td id="HOLD" bgcolor="#FFEBCD">HOLD</td>
				   <td id="DONE" bgcolor="#E0FFFF">DONE</td>
				  </tr>
				  
				  <tr id="ZANNI">
				   <td bgcolor="#A9A9A9">josé</td>
				   <td bgcolor="#FFF8DC"></td>
				   <td bgcolor="#FFFACD"></td>
				   <td bgcolor="#FFEBCD"></td>
				   <td bgcolor="#E0FFFF"></td>
				  </tr>
				  
				  <tr id="ANA">
				   <td bgcolor="#A9A9A9">ana</td>
				   <td bgcolor="#FFF8DC	"></td>
				   <td bgcolor="#FFFACD"></td>
				   <td bgcolor="#FFEBCD"></td>
				   <td bgcolor="#E0FFFF"></td>
				  </tr>
				  
				  <tr id="EMERSON">
				   <td bgcolor="#A9A9A9">paulo</td>	
                   <td bgcolor="#FFF8DC"></td>
				   <td bgcolor="#FFFACD"></td>
				   <td bgcolor="#FFEBCD"></td>
				   <td bgcolor="#E0FFFF"></td>				   
				  </tr>
				  
				  <tr id="DANTAS">
				   <td bgcolor="#A9A9A9">luiz</td>
                   <td bgcolor="#FFF8DC"></td>
				   <td bgcolor="#FFFACD"></td>
				   <td bgcolor="#FFEBCD"></td>
				   <td bgcolor="#E0FFFF"></td>				   
				 </tr>
				  
				  <tr id="WALBER">
				   <td bgcolor="#A9A9A9">maria</td>
                   <td bgcolor="#FFF8DC"></td>
				   <td bgcolor="#FFFACD"></td>
				   <td bgcolor="#FFEBCD"></td>
				   <td bgcolor="#E0FFFF"></td>				   
				 </tr>      
			</table>
		</body>
	</html>
CSS

#table {
    border-collapse: collapse;
    position: relative;
    width: auto;
	
}

#table tr {
    border: 1px solid black;
}

#table td {
    border: 1px solid black;
}

#BRANCO{
	width: 200px;
	height: 200px;
    margin: auto;
}

#todo {
	width: 400px;
	height: 200px;
	text-align: center;
	font-size:30px;
	font-weight: bold;
	
}

#WIP{
	width: 400px;
	height: 200px;
	text-align: center;
	font-size:30px;
	font-weight: bold;
}

#HOLD{
	width: 400px;
	height: 200px;
	text-align: center;
	font-size:30px;
	font-weight: bold;
}

#DONE{
	width: 400px;
	height: 200px;
	text-align: center;
	font-size:30px;
	font-weight: bold;
}

#ZANNI{
	width: 200px;
	height: 250px;
	text-align: center;
	font-size:30px;
	font-weight: bold;
}

#ANA{
	width: 200px;
	height: 250px;
	text-align: center;
	font-size:30px;
	font-weight: bold;	
}

#EMERSON{
	width: 200px;
	height: 250px;
	text-align: center;
	font-size:30px;
	font-weight: bold;
}

#DANTAS{
	width: 200px;
	height: 250px;
	text-align: center;
	font-size:30px;
	font-weight: bold;
}

#WALBER{
	width: 200px;
	height: 250px;
	text-align: center;
	font-size:30px;
	font-weight: bold;
}

#postIt{ 
     display: none; 
     background-image:url("/ProjetoMeliora/post-it.png");
}

.textarea{ 
  border:none;
   font-family: arial;
   font-size: 12px;
   overflow: auto; 
   padding-top: 10px;

}

Bom dia, 

 

Pessoal, estou com muitos problemas em fazer um Kanban web, sei que existe vários modelos prontos, porém quando vocês verem o que eu preciso vão entender minha dificuldade, pois o em meu projeto tenho colunas na lateral respectiva as pessoas,  o mais simples eu já fiz, a estrutura fiz em table, porém não tenho conhecimento algum de front and a não ser html e css básico, preciso que nessa tela, eu clique no post-it, aparecendo assim um outro posti-it onde eu possa escrever dentro dele, e colocar ele na coluna que eu quiser, podendo movimentar ele livremente.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×