.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

Proposta 1/Linha de código com comentario/Adapitacao__CC.css

@@ -0,0 +1,51 @@
+
+/*Linha de código para adapitação do painel login sobre outras resoluções, tendo assm @media screen and (max-width:1200px) a  colocação da medida que vai acontecer uma modificação no painel tendo então a modificação sendo aplicada em largura e altura.
+Em outras palavras ao painel atingir o resolucão 1200px, ele ira reduzir o seu tamanho para width de 550px enquanto seu heigth de 550px 
+
+
+Tendo essa edicões aplicadas:
+-Width e heigth: Essas declarações são as suas medidas de largura e altura respectivamente, na propria mudanção de resolucão da classe bloco, em outras palavras mudando diretalmente o tamanho do painel.
+*/
+
+@media screen and (max-width:1200px) {
+
+
+    .Bloco {
+
+        max-width: 550px;
+        max-height: 550px;
+
+
+    }
+
+
+}
+
+@media screen and (max-width:850px) {
+
+
+    .Bloco {
+
+        max-width: 450px;
+
+
+    }
+
+
+}
+
+
+
+
+@media screen and (max-width:450px) {
+
+
+    .Bloco {
+
+        max-width: 350px;
+
+
+    }
+
+
+}

Proposta 1/Linha de código com comentario/Estilo__CC.css

@@ -0,0 +1,378 @@
+
+/* Tag mencionada "*" responsavel vitalmente em manter o painel centralizado dentro da pagina, com todos os seus elementos de forma responsiva.*/
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Classe "fundo" responsavel pelo proprio fundo da página, utilizando algumas tags para o desenvolver desse padrão.
+Tendo alguns edições aplicadas:
+-background-img: Essa declaração é para a inxersão de uma imagem no fundo, uitlizando "./" para navegacão dos arquivos.
+-background-size: cover; Essa declaração é para atribuir um fundo, de uma forma de preenchimento.
+*/
+
+.fundo {
+
+
+    background-image: url('./Acessts_CC/Prancheta\ 5.jpg');
+    background-size: Cover;
+
+}
+
+
+
+/* Classe "centralizar" desenvolvida com um unico intuito de manter todos os elementos da propria página centralizados.
+Tendo alguns edições aplicadas:
+
+-Display: flex; Essa declaração responsavel pelo alinhamento do painel ser auto ajustavel,
+-Justify-content: center, align-items:center e min-height:100vh; Essas declarações são focadas para deixar o painel ailnhado tanto verticalmente, quanto horizontalmente e com uma distancia do topo da página, tendo suas funcões explicadas respectivamente.
+*/
+
+.centralizar {
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+
+}
+
+/* Font-face sendo uma tag para trazer uma fonte externa para dentro da propria linha de código.
+
+-font-family a definição do nome dessa nova fonte.
+-src com url sendo a extração da própria fonte para dentro da linha de código, utilizando "./" para iniciar a navegação da pasta.
+*/
+
+@font-face {
+    font-family: fontealpha;
+    src: url(./Acessts_CC/zekton\ rg.otf);
+}
+
+
+/*Classe "bloco" desenvolvida com um unico intuito, de organizar todos os elementos do formulario input, dentro de um painel central criada pela propria classe, em outras palavras ela seria o proprio corpo do painel log.
+Tendo alguns edições aplicadas:
+
+
+-Box-shadow: Essa declaração é responsavel por aplicar sombras em torno de todo o painel, sendo o seu primeiro 0 a direção da sombra como esqueda ou direita, seu segundo 0 sendo outro direcionamento da sombra para cima ou para baixo, enquanto o 10 representa a intensidade dessa sombra.
+-Padding: Essa declaração atribui um preenchimento interno no elemento usado tendo sua forma resumida, focada declarar o 30px no seu top e Bottom "Cima e baixo" e 45px no seu left, right (Esquerda e direita).
+-border-radius: Essa declaração atribuida para, a definição do aredondamento das pontas da propria borda do elemeneto.
+-Width e heigth: Essas declarações são as suas medidas de largura e altura respectivamente.
+-border: Essa declaração é usada para originar uma borda no elemento aplicando sua espessura 3px, depois a definindo em padrão solido “Solid” e por ultimo definindo sua cor atraves do rgb (255, 255, 255)= White.
+ -background-color: Essa declaração foi usada para definir a cor do fundo do painel no caso definindo sua cor atraves do rgb(255, 255, 255)=White.
+*/
+
+.Bloco {
+
+    box-shadow: 0 0 10px black;
+    padding: 30px 45px;
+    border-radius: 20px;
+    width: 750px;
+    height: 600px;
+    border: 3px solid rgb(255, 255, 255);
+    background-color: rgb(255, 255, 255);
+
+
+}
+
+/*Classe "logo" responsavel pelo alinhamento da imangem com logo da empresa na parte superior do painel log.
+Tendo alguns edições aplicadas:
+
+-text-align: center;, align-items:center; Essas declarações são focadas para deixar o elemento alinhado tanto verticalmente, quanto horizontalmente no centro.
+*/
+
+.logo {
+
+    align-items: center;
+    text-align: center;
+
+}
+
+/*Classe "Login_central"" focada principalmente na organização e edição da palavra login, entre a logo e os campos imputs.
+Tendo alguns edições aplicadas:
+
+-text-align: center;, align-items:center; Essa declarações são focadas para deixar o elemento alinhado tanto verticalmente, quanto horizontalmente no centro. 
+-Color: Essa declaração foi usada para aplicação de um color para diretamente na fonte.
+-font-family:fontealpha, Essas declaração altera a tipografia da fonte, para propria que foi trazida para a linha de código, sendo ela a fontealpha.
+-font-size: Essa declaração é para aumentar o tamanho da fonte.
+ -Padding: Essa declaração atribui um preenchimento interno no próprio elemento, tendo sua aplicação de forma resumida com esse padrão top "Cima", left"Esquerda", bottom "baixo", rigth "Direita".
+.*/
+
+.login_central {
+
+
+    align-items: center;
+    text-align: center;
+    color: rgb(0, 0, 0);
+    font-family: fontealpha;
+    font-size: 20px;
+    padding: 5px 0px 10px 0px;
+
+}
+
+/*Classe "Login" desenvolvida com o objetivos de alinhar todos os elementos relacionados com o campo email.
+
+Tendo alguns edições aplicadas:
+
+-Align-items: center; Essas declaração alinha todo o grupo, no centro do painel.
+-Width: 100%; Essa declaração corresponde a largura de um elemento, a defini com 100% pegando a referencia do largura maxima do painel não da página, levando ela automatica sempre se adapitar com o tamanho do painel.
+*/
+
+.Login {
+
+    align-items: center;
+    width: 100%;
+
+}
+
+/*Classe "login_label"" focada na organização e edição do conteudo label, antes do proprio input de email.
+Tendo alguns edições aplicadas:
+
+-Display:inline-block, Essa declaração aplica uma organização do elemento em blocos, que ficam na mesma linha, ou seja um do lado do outro, mais aplicando br na linha de código do html, o elemento fica um em cima do outro.
+-Margin: 5px 5px 0px 0px; Essa declaração sendo para o expasamento externo do elemento diante aos outros que estão no painel, sendo em ordem respectiva top "Cima", left"Esquerda", bottom "baixo", rigth "Direita".
+-font-family:fontealpha, Essa declaração altera a tipografia da fonte, para propria que foi trazida para a linha de código, sendo ela a fontealpha.
+-font-size: Essa declaração é para aumentar o tamanho da fonte.
+ -Padding: Essa declaração atribui um preenchimento interno no próprio elemento, tendo sua aplicação de forma resumida com esse padrão top "Cima", left"Esquerda", bottom "baixo", rigth "Direita".
+*/
+
+
+.Login_label {
+
+    display: inline-block;
+    margin: 5px 5px 0px 0px;
+    font-size: 20px;
+    font-family: fontealpha;
+    padding: 10px 10px 10px 0px;
+    color: rgb(0, 0, 0);
+
+}
+
+
+/*Classe "login_input" focada na organização e edição do conteudo input do email.
+Tendo alguns edições aplicadas:
+
+-width e heigth: Essa declaração são paras medidas, de largura e altura respectivamente, sendo que a largura foi aplicada um 100% da largura maxima da classe Login, para se adapitar naturalmente com classe e próprio painel.
+-font-size: Essa declaração é para aumentar o tamanho da fonte.
+ -padding: Essa declaração atribui um preenchimento interno no próprio elemento, tendo sua aplicação de forma resumida com esse padrão top "Cima", left"Esquerda", bottom "baixo", rigth "Direita".
+-color: Essa declaração foi usada para aplicação de um color, diretamente na fonte que é revalada durante o preenchimento do campo.
+-margin: 0px 0; Essa declaração está sendo para o expasamento externa do elemento diante aos outros que estão no painel, no entanto só foram declaradas o 0px no seu top e Bottom "Cima e baixo" e 0 no seu left right.
+-border: none; Essa declaração é uma utilizacão da tag para retirar o elemento definido, ou seja a propria borda do input, que vem de forma padronizada pelor proprio formulario.
+-outline: none; Essa declaração é uma utilizacão da tag para retirar o elemento definido, ou seja a propria linha do campo input, que vem de forma padronizada pelor proprio formulario.
+-border-radius: Essa Tag atribuida para, a definição do aredondamento das pontas da propria borda do elemeneto.
+-border: Essa declaração é usada para originar uma borda no elemento aplicando sua espessura 3px, depois a definindo em padrão solido “Solid” e por ultimo definindo sua cor atraves do rgb (255, 255, 255)= White.
+
+*/
+
+
+.Login_input {
+
+    width: 100%;
+    height: 50px;
+    padding: 20px 10px 20px 20px;
+    font-size: 16px;
+    color: black;
+    margin: 0px 0;
+    border: none;
+    outline: none;
+    border: 3px solid rgb(0, 0, 0);
+    border-radius: 10px;
+
+}
+
+/*
+Edição focada usando a classe "Login_input" focando na tag "input", todas as edições dentro dessa abertura de classe serão focadas somente no campo input e nenhum outro elemento.
+Tendo alguns edições aplicadas:
+
+-Width:100%; height:100%; Essa declaração é a largura e altura com a extensão maximas focadas no campo input sobre a extensão  de sua propria classe, sendo mais uma garantia para a adaptação do campo input.
+-Background: transparent; Essa declaração é usada para retirar um fundo do elemento, no caso retirando o fundo do campo input.
+
+*/
+
+.Login_input input {
+
+    width: 100%;
+    height: 100%;
+    background: transparent;
+
+}
+
+/*"Login_input":hover defini somente uma interação do campo input com a mouse, onde ao passar do mouse sobre o elemento ele realizara uma ação.
+-Definida aqui como a mudaça de cor do próprio border
+*/
+
+.Login_input:hover {
+
+    border: 4px solid rgb(30, 121, 132);
+
+}
+
+/*Edição usando a classe "Login" focando na tag "input" sendo ainda mais especifico no atributo placeholder.
+Tendo alguns edições aplicadas:
+
+-Color: Essa declaração foi usada para aplicação de um color para diretamente na fonte, presetando antes do preenchimento dentro do campo input.
+-font-family:fontealpha, Essa declaração altera a tipografia da fonte, para propria que foi trazida para a linha de código, sendo ela a fontealpha, presetanda antes do preenchimento do campo input, dentro do próprio.
+-font-size: Essa declaração é para aumentar o tamanho da fonte, presetanda antes do preenchimento do campo input, dentro do próprio.
+ */
+
+.Login input::placeholder {
+
+    color: rgb(0, 0, 0);
+    font-family: fontealpha;
+    font-size: 15px;
+
+}
+
+/*Classe "Senha" desenvolvida com um objetivos para o alinhamento dos os elementos de campo relacionados com a senha.
+Tendo alguns edições aplicadas:
+
+
+-Align-items: center; Essa declaração alinha todo o grupo, no centro do painel.
+-Width: 100%; Essa declaração corresponde a largura de um elemento, a defini com 100% pegando a referencia do largura maxima do painel não da página, levando ela automatica sempre se adapitar com o tamanho do painel.
+*/
+
+
+.Senha {
+
+    align-items: center;
+    width: 100%;
+}
+
+
+/*Classe "Senha_label"" focada na organização e edição do conteudo label antes do proprio input de Password.
+Tendo alguns edições aplicadas:
+
+-Display:inline-block, Essa declaração aplica uma organização do elemento em blocos, que ficam na mesma linha, ou seja um do lado do outro, mais aplicando br na linha de código do html, o elemento fica um em cima do outro.
+-Margin: 5px 5px 0px 0px; Essa declaração sendo para o expasamento externo do elemento diante aos outros que estão no painel, sendo em ordem respectiva top "Cima", left"Esquerda", bottom "baixo", rigth "Direita".
+-font-family:fontealpha, Essa declaração altera a tipografia da fonte, para propria que foi trazida para a linha de código, sendo ela a fontealpha.
+-font-size: Essa declaração é para aumentar o tamanho da fonte.
+ -Padding: Essa declaração atribui um preenchimento interno no próprio elemento, tendo sua aplicação de forma resumida com esse padrão top "Cima", left"Esquerda", bottom "baixo", rigth "Direita".
+*/
+
+
+
+.Senha_label {
+
+    display: inline-block;
+    margin: 5px 20px 0px 0px;
+    font-size: 20px;
+    font-family: fontealpha;
+    padding: 10px 10px 10px 1px;
+    color: rgb(0, 0, 0);
+    padding: 10px 20px 10px 0px;
+
+}
+
+/*Classe "Senha_input" focada na organização e edição do conteudo input do Senha.
+Tendo alguns edições aplicadas:
+
+-width e heigth: Essa declaração são paras medidas, de largura e altura respectivamente, sendo que a largura foi aplicada um 100% da largura maxima da classe Login, para se adapitar naturalmente com classe e próprio painel.
+-font-size: Essa declaração é para aumentar o tamanho da fonte.
+ -padding: Essa declaração atribui um preenchimento interno no próprio elemento, tendo sua aplicação de forma resumida com esse padrão top "Cima", left"Esquerda", bottom "baixo", rigth "Direita".
+-color: Essa declaração foi usada para aplicação de um color, diretamente na fonte que é revalada durante o preenchimento do campo.
+-margin: 0px 0; Essa declaração está sendo para o expasamento externa do elemento diante aos outros que estão no painel, no entanto só foram declaradas o 0px no seu top e Bottom "Cima e baixo" e 0 no seu left right.
+-border: none; Essa declaração é utilizacão da tag para retirar o elemento definido, ou seja a propria borda do input, que vem de forma padronizada pelor proprio formulario.
+-outline: none; Essa declaração é utilizacão da tag para retirar o elemento definido, ou seja a propria linha do campo input, que vem de forma padronizada pelor proprio formulario.
+-border-radius: Essa declaração atribuida para, a definição do aredondamento das pontas da propria borda do elemeneto.
+-border: Essa declaração é usada para originar uma borda no elemento aplicando sua espessura 3px, depois a definindo em padrão solido “Solid” e por ultimo definindo sua cor atraves do rgb (255, 255, 255)= White.
+
+*/
+
+
+.Senha_input {
+
+    width: 100%;
+    height: 50px;
+    padding: 20px 10px 20px 20px;
+    font-size: 16px;
+    color: black;
+    margin: 0px 0;
+    border: none;
+    outline: none;
+    border: 3px solid rgb(0, 0, 0);
+    border-radius: 10px;
+
+}
+
+/*Edição focada usando a classe "Senha_input" focando na tag "input", todas as edições dentro dessa abertura de classe serão focadas somente no campo input e nenhum outro elemento.
+Tendo alguns edições aplicadas:
+
+-Width:100%; height:100%; Usando essas tags largura e altura com a extensão maximas focadas no campo input sobre a extensão  de sua propria classe, sendo mais uma garantia para a adaptação do campo input.
+-Background: transparent; Essa tag é usada para retirar um fundo do elemento, no caso retirando o fundo do campo input.
+*/
+
+.Senha_input input {
+
+    width: 100%;
+    height: 100%;
+    background: transparent;
+
+}
+
+/*Classe "Senha_input":hover defini somente uma interação do campo input com a mouse, onde ao passar do mouse sobre o elemento ele realizara uma ação.
+
+-Definida aqui como a mudaça de cor do próprio border.
+*/
+
+.Senha_input:hover {
+
+    border: 4px solid rgb(30, 121, 132);
+
+}
+
+/*Edição usando a classe "Senha" focando na tag "input" sendo ainda mais especifico no atributo placeholder.
+Tendo alguns edições aplicadas:
+
+
+-Color: Essa declaração foi usada para aplicação de um color para diretamente na fonte, presetando antes do preenchimento dentro do campo input.
+-font-family:fontealpha, Essa declaração altera a tipografia da fonte, para propria que foi trazida para a linha de código, sendo ela a fontealpha, presetanda antes do preenchimento do campo input, dentro do próprio.
+-font-size: Essa declaração é para aumentar o tamanho da fonte, presetanda antes do preenchimento do campo input, dentro do próprio.
+*/
+
+.Senha input::placeholder {
+
+    color: rgb(0, 0, 0);
+    font-family: fontealpha;
+    font-size: 15px;
+
+}
+
+/*Classe "botao" focada principal no alinhamento do botão, enquanto também aplica algumas mudanças no seu designer.
+Tendo alguns edições aplicadas:
+
+-Margin-top: Essa declaração usada somente para expasamentos externos focalizados sobre o topo do elementos, aplicando assim 40px para dar um espaçamento do botão para o input senha.
+-width: 100%, height: 50px: Essa declaração é para definir tanto lagura quanto altura do próprio botão, tendo a largura do botão adapitativa a largura total do painel.
+-border-radius: 20px; Essa declaração é para definir o aredondamento da propria borda do botão.
+-background-color: rgb(28, 173, 180); Essa declaração para definir a cor de fundo desse botão.
+-Color: Essa declaração foi usada para aplicação de um color para diretamente na fonte, presetando antes do preenchimento dentro do campo input.
+-font-family:fontealpha, Essa declaração altera a tipografia da fonte, para propria que foi trazida para a linha de código, sendo ela a fontealpha, presetanda antes do preenchimento do campo input, dentro do próprio.
+-font-size: Essa declaração é para aumentar o tamanho da fonte, presetanda antes do preenchimento do campo input, dentro do próprio.
+-border: none; e outline: none; para retirar o padrão do botão para uma melhor edição.
+*/
+
+.botao {
+
+    margin-top: 40px;
+    width: 100%;
+    height: 50px;
+    border-radius: 20px;
+    background-color: rgb(28, 173, 180);
+    font-family: fontealpha;
+    font-size: 20px;
+    color: rgb(0, 0, 0);
+    border: none;
+    outline: none;
+
+}
+
+/*classe "Senha_input":hover defini somente uma interação do campo input com a mouse, onde ao passar do mouse sobre o elemento ele realizara uma ação.
+
+-Definido uma declaração de uma nova cor de backgroud, e uma nova cor de font para o botão.
+*/
+
+.botao:hover {
+
+    background-color: rgb(30, 121, 132);
+    color: white;
+
+}

Proposta 1/Linha de código com comentario/Index_CC.html

@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="pt-Br">
+
+<head>
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+
+    <!--
+        <link href="./Estilo__CC.css" rel="stylesheet"> Sendo uma conexão direta com o arquivo css voltados para todos os estilos da página, levando a trazer todos os estilos desenvolvidos no outro arquivo, usando “./” para o início da navegação entre as pastas.
+        <link href="./Adapitacao__CC.css" rel="Stylesheet"> Sendo uma conexão direta com o arquivo css voltado para a adaptação da página a certas resoluções , levando a trazer todas as suas orientações de resolução para o html, usando “./” para o início da navegação entre as pastas.
+    -->
+
+    <link href="./Estilo__CC.css" rel="stylesheet">
+    <link href="./Adapitacao__CC.css" rel="Stylesheet">
+
+</head>
+
+    <!--Tag Boby possui duas classes, que aplicam cada uma, um estilo nele, onde a fundo trabalha diretamente com o background do projeto, enquanto a centralizar trabalha diretamente com organizar do painel diante a página.
+-->
+
+
+<body class="fundo centralizar">
+
+    <!--Main uma tag semantica para organizar todos os elementos da página, toda configuração aplicada nela vai passar por todos os elementos da própria página-->
+
+    <main>
+
+
+        <!--Div 1 matriz focada na organização de todos os elementos do formulario de input, tendo todas as mesmas caracteristicas da proprio main, só que suas alterações serão focalizadas no campo input.-->
+
+
+        <div>
+
+                    <!--Div bloco, sendo essa o corpo principal do painel login, tendo nela a classe bloco, que construi todo o estilo do corpo do proprio painel.-->
+
+            <div class="Bloco">
+
+            <!-- Div Img, div responsavel na inxersão da logo no painel, tendo uma estrutura simplis.
+
+                -Img: sendo sua tag principal para funcionamento da propria linha de inxersão.
+                -Src: resgata imagem de alguma localização dentro das pastas do proprio projeto, usando "/" para iniciar a navegação. 
+                -width e height: sendo aqueles que regulam o tamanho da propria imagem, em pixels sendo Largura e altura respectivamente.-->
+
+                <div class="logo">
+                    <img src="./Acessts_CC/logo_2.png" width="150px" height="150px">
+
+                </div>
+
+                    <!--A bertura da tag formulario, onde possui todos os campos inputs "caixas de texto" do proprio projeto.-->
+
+                <form name="formLogin" id="formLogin" method="post" action="login.jsp">
+
+                    <!--Div 1 Titulo do painel, basicamente focada na edição somente o texto inicial do painel, o definindo diretamente com um titulo com o h1, além de ser editada diretamente pela classe de login_central.-->
+
+                    <div class="login_central">
+
+                        <h1>
+                            Login
+                        </h1>
+
+                    </div>
+
+                    <!--Div 2 campo input área log, basicamene focalizada em ser uma matriz de organização para tanto o campo input, quanto para o campo label do próprio loguinho.
+                    Possuindo a classe login responsavel diretamente por organizar todos os elemenetos rementenes campo e email do login.-->
+
+                    <div class="Login">
+
+                            <!--Label sendo a tag focada em ser um texo antes da caixa de dialgo do input, possuindo a classe Login_label para edição.
+                            Ponto importante a escrita depois da abertura da tag e antes do fechamento dela, é o elemento textual que será apresentado na página.-->
+
+                        <label class="Login_label" >Endereço de Email:</label><br>
+
+                        <!--Input sendo a tag responsavel por o armazenamento de dados dedicados a ela, seu type é a definição do seu tipo, em outras palavras sendo um padrão de comportamento do campo input, neste caso sendo do padrão texto que comporta todos os elementos textuais.
+                        -Size sendo responsavel pelo o tamanho da fonte
+                        -Placholder sendo uma um texto presente dentro do campo input que desaparece ao iniciar a escrita.
+                        -Required sendo a definição de um campo obrigatorio de resgitros empedido o usuario avançar sem colocar todos os dados no campo input.
+                        -Autofocus Sendo uma definição para direcionar o foco do teclado do usuario diretamente para o campo input ao inicia a tela da página.
+                        -->
+
+                        <input class="Login_input" type="text" name="usuario" id="usuario" size="20" placeholder="Email"
+                            required autofocus>
+
+
+                    </div>
+
+                   <!--
+                    Div 3 campo input área log, basicamene focalizada em ser uma matriz de organização para tanto o campo imput quanto para o campo label da própria senha.
+                    Possuindo a classe "Senha" responsavel diretamente por organizar todos os elemenetos direcionandos o campo de Senha.
+                    -->
+
+                    <div class="Senha">
+
+                        <!---
+                        Label sendo a tag focada em ser um texo antes da caixa de dialgo do input, possuindo a classe Senha_label para edição.
+                        Ponto importante a escrita depois da abertura da tag e antes do fechamento dela, é o elemento textual que será apresentado na página.
+-->
+
+                        <label class="Senha_label">Senha:</label><br>
+
+                        <!--Input sendo a tag responsavel por o armazenamento de dados dedicados a ela, seu type é a definição do seu tipo, em outras palavras sendo um padrão de comportamento do campo input, neste caso sendo do padrão neste caso sendo do padrão password que comporta todos os elementos textuais como uma senha.
+                        -Size sendo responsavel pelo o tamanho da fonte.
+                        -Placholder sendo uma um texto presente dentro do campo input que desaparece ao iniciar a escrita.
+                        -Required sendo a definição de um campo obrigatorio de resgitros empedido o usuario avançar sem colocar todos os dados no campo input.
+-->
+
+                        <input class="Senha_input" type="password" name="password" id="password" size="20"
+                            placeholder="Escreva uma senha forte" required>
+
+
+                    </div>
+
+
+                    <!--
+                        Div 4 campo input área botão, basicamene focalizada somente na edição do próprio botão de enviu do log.
+                        Sendo sua tag principal button, com o seu type definido sbumit para o envio de todo o conteudo do proprio painel.
+
+                        Ponto importante a escrita depois da abertura da tag e antes do fechamento dela, é o elemento textual que será apresentado na página.
+-->
+
+                    <div>
+
+                        <button class="botao" type="sbumit" id="submit" name="submit">Ok</button>
+
+                    </div>
+
+                </form>
+
+            </div>
+
+        </div>
+
+        <script language="javascript">
+            document.getElementById("usuario").focus();
+        </script>
+
+    </main>
+
+</body>
+
+</html>

Proposta 1/Linha de código sem comentario/Adapitacao_SC.css

@@ -0,0 +1,44 @@
+
+
+@media screen and (max-width:1200px) {
+
+
+    .Bloco {
+
+        max-width: 550px;
+        max-height: 550px;
+
+
+    }
+
+
+}
+
+@media screen and (max-width:850px) {
+
+
+    .Bloco {
+
+        max-width: 450px;
+
+
+    }
+
+
+}
+
+
+
+
+@media screen and (max-width:450px) {
+
+
+    .Bloco {
+
+        max-width: 350px;
+
+
+    }
+
+
+}

Proposta 1/Linha de código sem comentario/Estilo_SC.css

@@ -0,0 +1,211 @@
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+
+
+.fundo {
+
+
+    background-image: url('./Acessts_SC/Prancheta\ 5.jpg');
+    background-size: Cover;
+
+}
+
+
+.centralizar {
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+
+}
+
+
+@font-face {
+    font-family: fontealpha;
+    src: url(./Acessts_SC/zekton\ rg.otf);
+}
+
+
+
+.Bloco {
+
+    box-shadow: 0 0 10px black;
+    padding: 30px 45px;
+    border-radius: 20px;
+    width: 750px;
+    height: 600px;
+    border: 3px solid rgb(255, 255, 255);
+    background-color: rgb(255, 255, 255);
+
+
+}
+
+
+
+.logo {
+
+    align-items: center;
+    text-align: center;
+
+}
+
+
+
+.login_central {
+
+
+    align-items: center;
+    text-align: center;
+    color: rgb(0, 0, 0);
+    font-family: fontealpha;
+    font-size: 20px;
+    padding: 5px 0px 10px 0px;
+
+}
+
+
+.Login {
+
+    align-items: center;
+    width: 100%;
+
+}
+
+
+.Login_label {
+
+    display: inline-block;
+    margin: 5px 5px 0px 0px;
+    font-size: 20px;
+    font-family: fontealpha;
+    padding: 10px 10px 10px 0px;
+    color: rgb(0, 0, 0);
+
+}
+
+
+.Login_input {
+
+    width: 100%;
+    height: 50px;
+    padding: 20px 10px 20px 20px;
+    font-size: 16px;
+    color: black;
+    margin: 0px 0;
+    border: none;
+    outline: none;
+    border: 3px solid rgb(0, 0, 0);
+    border-radius: 10px;
+
+}
+
+.Login_input input {
+
+    width: 100%;
+    height: 100%;
+    background: transparent;
+
+}
+
+
+.Login_input:hover {
+
+    border: 4px solid rgb(30, 121, 132);
+
+}
+
+
+
+.Login input::placeholder {
+
+    color: rgb(0, 0, 0);
+    font-family: fontealpha;
+    font-size: 15px;
+
+}
+
+
+.Senha {
+
+    align-items: center;
+    width: 100%;
+}
+
+.Senha_label {
+
+    display: inline-block;
+    margin: 5px 20px 0px 0px;
+    font-size: 20px;
+    font-family: fontealpha;
+    padding: 10px 10px 10px 1px;
+    color: rgb(0, 0, 0);
+    padding: 10px 20px 10px 0px;
+
+}
+
+.Senha_input {
+
+    width: 100%;
+    height: 50px;
+    padding: 20px 10px 20px 20px;
+    font-size: 16px;
+    color: black;
+    margin: 0px 0;
+    border: none;
+    outline: none;
+    border: 3px solid rgb(0, 0, 0);
+    border-radius: 10px;
+
+}
+
+.Senha_input input {
+
+    width: 100%;
+    height: 100%;
+    background: transparent;
+
+}
+
+.Senha_input:hover {
+
+    border: 4px solid rgb(30, 121, 132);
+
+}
+
+.Senha input::placeholder {
+
+    color: rgb(0, 0, 0);
+    font-family: fontealpha;
+    font-size: 15px;
+
+}
+
+.botao {
+
+    margin-top: 40px;
+    width: 100%;
+    height: 50px;
+    border-radius: 20px;
+    background-color: rgb(28, 173, 180);
+    font-family: fontealpha;
+    font-size: 20px;
+    color: rgb(0, 0, 0);
+    border: none;
+    outline: none;
+
+}
+
+
+
+.botao:hover {
+
+    background-color: rgb(30, 121, 132);
+    color: white;
+
+}

Proposta 1/Linha de código sem comentario/Index_SC.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="pt-Br">
+
+<head>
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+    
+    <link href="./Estilo_SC.css" rel="stylesheet">
+    <link href="./Adapitacao_SC.css" rel="Stylesheet">
+
+</head>
+
+
+
+<body class="fundo centralizar">
+
+
+
+    <main>
+
+
+        <div>
+
+            <div class="Bloco">
+        
+
+                <div class="logo">
+                    <img src="./Acessts_SC/logo_2.png" width="150px" height="150px">
+
+                </div>
+
+
+
+                <form name="formLogin" id="formLogin" method="post" action="login.jsp">
+
+
+                    <div class="login_central">
+
+                        <h1>
+                            Login
+                        </h1>
+
+                    </div>
+
+
+                    <div class="Login">
+
+
+                        <label class="Login_label" >Endereço de Email:</label><br>
+
+                        <input class="Login_input" type="text" name="usuario" id="usuario" size="20" placeholder="Email"
+                            required autofocus>
+
+
+                    </div>
+
+                   
+
+                    <div class="Senha">
+
+                    
+                        <label class="Senha_label">Senha:</label><br>
+
+                        <input class="Senha_input" type="password" name="password" id="password" size="20"
+                            placeholder="Escreva uma senha forte" required>
+
+
+                    </div>
+
+
+                    <div>
+
+                        <button class="botao" type="sbumit" id="submit" name="submit">Ok</button>
+
+                    </div>
+
+                </form>
+
+            </div>
+
+        </div>
+
+
+
+        <script language="javascript">
+            document.getElementById("usuario").focus();
+        </script>
+
+    </main>
+
+</body>
+
+</html>

Readm.md

@@ -1 +0,0 @@
-Oi!

_padrao.css

@@ -0,0 +1,119 @@
+H1
+{
+font-family: verdana;
+font-size: 15pt;
+color: green;
+}
+
+Body 
+{
+font-family: verdana;
+font-size: 9pt;
+color: #000000;
+}
+
+Td
+{
+font-family: verdana;
+font-size: 9pt;
+color: black;
+}
+
+.A 
+{
+text-decoration: none;
+color: blue;
+}
+
+.A:visited {
+color: blue;
+}
+
+.A:active {
+color: navy;
+}
+
+.fonte_pequena_cor1
+{
+font-family: verdana;
+font-size: 8pt;
+color: navy;
+}
+
+.fonte_pequena_cor2
+{
+font-family: verdana;
+font-size: 8pt;
+color: #000000;
+}
+
+.fonte_pequena_cor3
+{
+font-family: verdana;
+font-size: 7pt;
+color: white;
+visited: white;
+active: lightgrey;
+text-decoration: none;
+}
+
+.fonte_desabilitado
+{
+font-family: verdana;
+font-size: 8pt;
+color: lightgrey;
+}
+
+.fonte_desabilitado_normal
+{
+font-family: verdana;
+font-size: 9pt;
+color: gray;
+}
+
+.fonte_menu
+{
+font-family: Verdana;
+font-size: 13;
+font-weight: bold;
+color: #000000;
+}
+
+.fonte_sub_menu
+{
+font-family: Verdana;
+font-size: 11;
+font-weight: bold;
+color: #000000;
+}
+
+input
+{
+font-family: Verdana; 
+font-size: 9pt;
+}
+
+select
+{
+font-family: Verdana; 
+font-size: 9pt;
+}
+
+button
+{
+font-family: Verdana; 
+font-size: 9pt;
+}
+
+textarea
+{
+font-family: Verdana; 
+font-size: 9pt;
+}
+
+.pequeno
+{
+font-family: Verdana; 
+font-size: 7pt;
+}
+

index.html

@@ -0,0 +1,87 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html>
+
+
+<head>
+	<title>Sistema de Gest&atilde;o</title>
+	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+	<link href="css/padrao.css" rel="stylesheet" type="text/css">
+	<style type="text/css">
+		tr
+			{
+				text-align: center;
+				vertical-align: center;
+			}
+
+		td
+			{
+				font-family: verdana, arial, serif;
+				font-size: 13px;
+
+			}
+	</style>
+        
+</head>
+
+
+<body bgcolor = "#EEEEEE">
+
+	<table width="100%" border="0" cellSpacing="2" cellPadding="1">
+		<tr>
+			<td style="font-size: 50px">Sistema Enseg</td>
+		</tr>
+
+		<tr><td>&nbsp;</td></tr>
+
+		<tr>
+			<td>
+				Bem vindo ao Enseg - Sistema de Gest&atilde;o.<br>
+				Efetue o <b>Login</b> preenchendo os  campos abaixo.
+			</td>
+		</tr>
+
+		<tr><td>&nbsp;</td></tr>
+		<tr><td>&nbsp;</td></tr>
+		<tr><td>&nbsp;</td></tr>
+	</table>
+
+	<form name="formLogin" id="formLogin" method="post" action="login.jsp">
+		<table border="0" cellSpacing="2" cellPadding="0" align="center">
+			<tr>
+				<td align="right">&nbsp;</td>
+				<td align="left"><span style="font-weight: bold; color: green; font-size: 16px;">Login</td>
+			</tr>
+			<tr>
+				<td align="right"><b>Login: </b></td>
+				<td align="left"><input type="text" name="usuario" id="usuario" size="20"></td>
+			</tr>
+			<tr>
+				<td align="right"><b>Senha: </b></td>
+				<td align="left"><input type="password" name="password" id="password" size="20"></td>
+			</tr>
+			<tr>
+				<td align="right">&nbsp;</td>
+				<td align="left"><input type="submit" id="submit" name="submit" value="     OK     "></td>
+			</tr>
+		</table>
+	</form>
+
+	<table border="0" align="center" cellPadding="1" cellSpacing="2">
+		<tr><td>&nbsp;</td></tr>
+		<tr><td>&nbsp;</td></tr>
+		<tr><td>&nbsp;</td></tr>
+		<tr>
+			<td>
+				<small>Desenvolvimento<br>
+				<em>Robnando</em></small>
+			</td>
+		</tr>
+	</table>
+
+	<script language="javascript">
+		document.getElementById("usuario").focus ();
+	</script>
+</body>
+
+
+</html>

tes/Contatos.html

@@ -1,357 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Contatos / iTGuys</title>
-
-  <link rel="stylesheet" href="./Css/page/Contatos/contatos.css">
-  <link rel="icon" type="image/x-icon" href="./Acessts/Imagens/iT_Guys/logo1.png">
-
-</head>
-
-
-<body>
-
-  <!-- Bloco focado para os iconis das redes sociais, tendo links para sites externos -->
-
-  <!--Fechamento para os iconis da redes socias -->
-
-  <!--Nav focado na barra de menu do usuario que possui links para cada uma das áreas internas do site-->
-  <header class="Bloco_1">
-    <div class="icon1">
-      <a href="https://www.facebook.com/itguysconsultoria/about">
-        <img src="./Acessts/Imagens/Iconis/facebook.png" alt="" class="icon2">
-      </a>
-      <a href="https://www.instagram.com/itguys.ti/">
-        <img src="./Acessts/Imagens/Iconis/instagram.png" alt="" class="icon2">
-      </a>
-
-      <a href="https://br.linkedin.com/company/itguysconsultoria">
-        <img src="./Acessts/Imagens/Iconis/linkedin.png" alt="" class="icon2">
-      </a>
-
-      <a href="">
-        <img src="./Acessts/Imagens/Iconis/o-email.png" alt="" class="icon2">
-      </a>
-
-      <a href="https://api.whatsapp.com/send?phone=5521966344698">
-        <img src="./Acessts/Imagens/Iconis/whatsapp (1).png" alt="" class="icon2">
-      </a>
-
-    </div>
-
-  </header>
-
-
-  <!--Menu principal-->
-
-  <nav class="Bloco_nav_1" id="bloco" >
-
-    <a href="./index.html"><img class="Logo" src="./Acessts/Imagens/iT_Guys/logo_340x100.png" alt=""></a>
-
-    <div class="Bloco_nav_2">
-      
-        <a href="./Sobre.html">
-          <p class="nav_bloco_iten">Sobre</p>
-        </a>
-        <a href="./Serviços.html">
-          <p class="nav_bloco_iten">Serviços</p>
-        </a>
-        <a href="./Contatos.html">
-          <p class="Contato nav_bloco_iten ">Agende uma consultoria</p>
-        </a>
-
-
-    </div>
-
-    </div>
-   
-    <!--
-    <div class="Botao1">
-      <a href="./login.html">
-        <button>Login</button>
-      </a>
-    </div>
--->
-
-
-  </nav>
-  <script>
-
-    var menu = window.document.getElementById('bloco');
-
-    window.addEventListener('scroll', function() {
-    // Verifica se o scroll vertical é maior que zero
-    if (window.pageYOffset > 0) {
-     
-      menu.style.position ='sticky'
-      menu.style.top ='0'
-      
-
-    } else {
-            menu.style.position ='absolute'
-            menu.style.top ='8vh'
-    }
-});
-  </script>
-
-
-  <!--Fechamento do Segundo Header-->
-
-
-  <!--Abertura do Main com todas as principas caracteristicas unicas do pagina home, trazendo um agrupamento em sections as proprias funcionalidades da pagina.-->
-
-  <main>
-
-
-
-    <article class="capitulo_1">
-
-      <section class="coluna_2">
-
-        <iframe
-          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3675.326037750306!2d-43.568575725438855!3d-22.9013421792589!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9be3fb83713bb3%3A0x377c13ebbf176ebc!2sRua%20Tenente%20Ronald%20Santoro%2C%20183%20-%20Campo%20Grande%2C%20Rio%20de%20Janeiro%20-%20RJ%2C%2023080-270!5e0!3m2!1spt-BR!2sbr!4v1718901373199!5m2!1spt-BR!2sbr"
-          width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
-          referrerpolicy="no-referrer-when-downgrade">
-        </iframe>
-
-      </section>
-
-      <section class="coluna_1">
-
-        <img src="./Acessts/Imagens/Iconis/pin-de-localizacao.png" alt="">
-
-      </section>
-
-    </article>
-
-    <article class="capitulo_2">
-
-      <section class="coluna_1">
-
-        <div class="painel_1">
-          <h2 class="titulo">Funcionamento</h2>
-          <p class="texto_complementar">Segunda á Sexta 09h ás 18h</p>
-        </div>
-        <div class="painel_2">
-          <h2 class="titulo">Endereço</h2>
-          <p class="texto_complementar">Rua Tenente Ronald Santoro, 183 - Campo Grande</p>
-        </div>
-        <div class="painel_3">
-          <h2 class="titulo">Contato</h2>
-          <p class="texto_complementar">Telefone (21) 96634-4698 <br>
-            E-mail:comercial@itguys.com.br</p>
-        </div>
-
-      </section>
-
-      <section class="coluna_2_email">
-
-        <div class="sub_coluna_1">
-          <h2>Fale com nossa consultoria de Ti e transforme seu negocio</h2>
-        </div>
-
-
-        <div class="sub_coluna_2">
-
-          <div class="particao_1">
-            <img src="./Acessts/Imagens/pexels-karolina-grabowska-5239946.jpg" alt="">
-          </div>
-
-
-          <div class="particao_2">
-            <form id="contactForm" action="enviar.php" method="post">
-
-              <div class="formulario_1">
-                <div class="label_1">
-                  <label for="name">Name</label>
-                </div>
-                <div class="input_1">
-                  <input type="text" name="nome" id="name" required>
-                </div>
-              </div>
-
-              <div class="formulario_2">
-                <div class="label_2">
-                  <label for="email">Email</label>
-                </div>
-                <div class="input_2">
-                  <input type="email" name="email" id="email" required>
-                </div>
-              </div>
-
-              <div class="formulario_3">
-                <div class="label_3">
-                  <label for="mensagem">Envie sua mensagem</label>
-                </div>
-                <div class="input_3">
-                  <textarea name="mensagem" id="mensagem" required></textarea>
-                </div>
-              </div>
-
-              <button type="submit">Enviar</button>
-            </form>
-
-            <div id="responsePopup" class="popup">
-              <div class="popup-content">
-                <span class="closeBtn">&times;</span>
-                <div id="responseContainer"></div>
-              </div>
-            </div>
-
-            <script src="./js/page/Contatos/pop_up_enviar.js"></script>
-
-          </div>
-
-        </div>
-
-
-      </section>
-
-
-    </article>
-
-  </main>
-
-  <!--Fechamento do main-->
-
-  <!--Rodapé focado na finalização da página tendo caminhos que ainda precisam ser decididos, além da logo da empresa e caminhos para todas as redes socias da propria empresa-->
-
-  <footer class="Bloco_Rodape1">
-
-    <div class="Coluna_Rod_1">
-      <div class="sub_coluna_Rod_1_1">
-
-        <img src="./Acessts/Imagens/iT_Guys/Logo_itGuys - Copia.png" alt="">
-
-      </div>
-
-      <div class="sub_coluna_Rod_1_2">
-        <div class="icon1_rod">
-          <a href="https://www.facebook.com/itguysconsultoria/about">
-            <img src="./Acessts/Imagens/Iconis/facebook.png" alt="" class="icon2_rod">
-          </a>
-
-          <a href="https://www.instagram.com/itguys.ti/">
-            <img src="./Acessts/Imagens/Iconis/instagram.png" alt="" class="icon2_rod">
-          </a>
-
-          <a href="https://br.linkedin.com/company/itguysconsultoria">
-            <img src="./Acessts/Imagens/Iconis/linkedin.png" alt="" class="icon2_rod">
-          </a>
-
-          <a href="">
-            <img src="./Acessts/Imagens/Iconis/o-email.png" alt="" class="icon2_rod">
-          </a>
-
-          <a href="https://api.whatsapp.com/send?phone=5521966344698">
-            <img src="./Acessts/Imagens/Iconis/whatsapp (1).png" alt="" class="icon2_rod">
-          </a>
-        </div>
-      </div>
-      <p>A IT Guys possui a expertise necessária para criar uma solução capaz de atender a sua necessidade.</p>
-    </div>
-
-    <div class="Coluna_Rod_2">
-      <div class="sub_coluna_Rod_2_1">
-        <div>
-          <div>
-            <h2>Titulo</h2>
-            <ul>
-              <a href="">
-                <li>Opição_1</li>
-              </a>
-              <a href="">
-                <li>Opição_1</li>
-              </a>
-              <a href="">
-                <li>Opição_1</li>
-              </a>
-              <a href="">
-                <li>Opição_1</li>
-              </a>
-              <a href="">
-                <li>Opição_1</li>
-              </a>
-              <a href="">
-                <li>Opição_1</li>
-              </a>
-            </ul>
-          </div>
-
-        </div>
-      </div>
-
-    </div>
-
-    <div class="Coluna_Rod_3">
-      <div class="sub_coluna_Rod_3_1">
-        <div>
-          <h2>Titulo</h2>
-          <ul>
-            <a href="">
-              <li>Opição_1</li>
-            </a>
-            <a href="">
-              <li>Opição_1</li>
-            </a>
-            <a href="">
-              <li>Opição_1</li>
-            </a>
-            <a href="">
-              <li>Opição_1</li>
-            </a>
-            <a href="">
-              <li>Opição_1</li>
-            </a>
-            <a href="">
-              <li>Opição_1</li>
-            </a>
-          </ul>
-        </div>
-      </div>
-    </div>
-
-    <div class="Coluna_Rod_4">
-      <div class="sub_coluna_Rod_4_1">
-        <div>
-          <h2>Titulo</h2>
-          <ul>
-            <a href="">
-              <li>Opição_1</li>
-            </a>
-            <a href="">
-              <li>Opição_1</li>
-            </a>
-            <a href="">
-              <li>Opição_1</li>
-            </a>
-            <a href="">
-              <li>Opição_1</li>
-            </a>
-            <a href="">
-              <li>Opição_1</li>
-            </a>
-            <a href="">
-              <li>Opição_1</li>
-            </a>
-          </ul>
-        </div>
-      </div>
-    </div>
-
-
-  </footer>
-
-  <footer class="Bloco_Rodape2">
-
-    <h2>2024 ItGuys. Todos os direitos reservados</h2>
-
-  </footer>
-
-
-</body>
-
-</html>