Toggle Lateral: HTML, CSS, sem JavaScript

16 de março de 2021

Durante a escolha dos elementos de um projeto você pode imaginar mais de mil e uma soluções que encaixam dentro do requisito de um projeto, isto vale também para as soluções adaptadas para que haja menos confusão durante o desenvolvimento e faz abranger mais detalhes que podem ser pensados para serem enriquecidos diante de tantas questões levantadas durante um conversa que dá início ao desenrolar de cada design de tela resolvida por ser consequente de cada solução selecionada.

Tenha em mãos cada solução em um repertório que faça existir menos complicação para depender menos da mão de obra e levantar mais questões sobre o desenvolvimento de cada profissional à se tornar aliado para que medida adotada para o desenvolvimento de arquitetura de um projeto.

Não decida apenas por haver mais soluções, adotar à medida do possível o caminho mais otimizado é a melhor rotina a ser adotada.

Aliar as medidas em que se torne propenso à tornar o projeto ainda mais viável frente a posição adotada para que se possa passar despercebido todo o conteúdo em que se coloca em prova para manter e selecionar os melhores refúgios durante o desenvolvimento de um projeto. Por isso, seja cauteloso diante de cada solução em que fora adotada, pois nem sempre você terá algo simples para derrubar um conceito já adotado.

Confira clicando neste LINK dentro de suas expectativas a solução dada para um Toggle sem JavaScript.

ARQUIVO .HTML:

 

<html>
<head>

<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">

</head>

<body>

<div class="topoLogia">

<div class="divisao divisaoAzul">

<div class="menuAzul">
<p class="soletra soletraAzul">BOAS VINDAS</p>
</div>

<div class="divLogin">
<h1 class="divisaoTitle">BOAS VINDAS</h1>
<form action="" method="POST">

<p class="pPhraseLoginFirst">
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum"
<br/><br/>

<input class="campoLogin" name="campoLogin" placeholder="LOGIN:" />

</p>

</br >
<p class="pPhraseLoginSecond">
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum"
<br/><br/>
<input class="campoSenha" name="campoSenha" placeholder="SENHA:" />

</p>


<div class="divBtLogin">

<input class="btLogin" type="submit" name="login" value="ENTRAR" />

</div>


</form>

</div>

</div>

<div class="divisao divisaoLaranja">

<div class="menuLaranja">
<p class="soletra soletraLaranja">CADASTRAR</p>
</div>

<div class="divLogin">

<h1 class="divisaoTitle">SISTEMA DE CADASTRO</h1>

<form action="" method="POST">

<p class="pPhraseLoginFirst">
The standard Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum"
<br/>

<input type="text" class="campoLogin" name="campoLogin" placeholder="LOGIN:" />

</p>

</br >
<p class="pPhraseLoginSecond">
Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum"
<br/>
<input type="text" class="campoSenha" name="campoEmail" placeholder="EMAIL:" />

</p>

</br >
<p class="pPhraseLoginSecond">
Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum"
<br/><br/>
<input type="password" class="campoSenha" name="campoSenha" placeholder="SENHA:" />

</p>


<div class="divBtSignIn">

<input class="btSignUp" type="submit" name="login" value="CADASTRAR" />

</div>

</form>

</div>

</div>

<div class="divisao divisaoVermelho">

<div class="menuVermelho">
<p class="soletra soletraVermelho">VERIFICAR</p>
</div>

<div class="divLogin">
<h1 class="divisaoTitle">SISTEMA DE VERIFICAÇÃO</h1>
<form action="" method="POST">

<p class="pPhraseLoginFirst">
Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum"
<br/><br/>

<input class="campoLogin" name="campoLogin" placeholder="LOGIN:" />

</p>

</br >
<p class="pPhraseLoginSecond">
The 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum"
<br/><br/>
<input class="campoSenha" name="campoSenha" placeholder="SENHA:" />

</p>

<div class="divBtLogin">

<input class="btLogin" type="submit" name="login" value="ENTRAR" />

</div>


</form>

</div>

</div>





























<div class="divisao divisaoVerde">

<div class="menuVerde">
<p class="soletra soletraVerde">EXCLUIR</p>
</div>

<div class="divLogin">
<h1 class="divisaoTitle">SISTEMA DE EXCLUSÃO</h1>
<form action="" method="POST">

<p class="pPhraseLoginFirst">
Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum"
<br/><br/>

<input class="campoLogin" name="campoLogin" placeholder="LOGIN:" />

</p>

</br >
<p class="pPhraseLoginSecond">
The 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum"
<br/><br/>
<input class="campoSenha" name="campoSenha" placeholder="SENHA:" />

</p>

<div class="divBtLogin">

<input class="btLogin" type="submit" name="login" value="ENTRAR" />

</div>


</form>

</div>

</div>

</div>

</body>

</html>

ARQUIVO .CSS:

* {
padding:0;
margin:0 auto;
border:0;
}

body {
font-family: 'Roboto', sans-serif;
}

.topoLogia {
width:450px;
min-height:530px;
}

.divisao {
width:450px;
height:600px;
position:absolute;
top:150px;
}

.soletra {
font-size:14px;
color:#ffffff;
text-align:center;
position:relative;
top:110px;
}

.divisaoTitle {
font-size:22px;
margin-bottom:25px;
color:#ffffff;
}

/*
DIVISAO AZUL: ENTRAR
*/

.menuAzul, .menuVerde, .menuLaranja, .menuVermelho {
cursor:pointer;
}

.divisaoAzul {
background:#4267B2;

}

.menuAzul {
width:150px;
height:150px;
position:relative;
top:0px;
left:-300px;
z-index:999;
background:#4267B2 url(images/entrar.png) no-repeat 45px 45px;
}

.menuAzul {
background:#4267B2 url(images/entrar.png) no-repeat 45px 45px;
}

.divisaoAzul:hover, .menuAzul:hover {
z-index:999999999;
}

/*
DIVISAO LARANJA: SISTEMA DE CADASTRO
*/

.menuLaranja {
width:150px;
height:150px;
position:relative;
top:150px;
left:-300px;
background:#FF6600 url(images/cadastrar.png) no-repeat 45px 45px;
z-index:999;
}

.divisaoLaranja:hover, .menuLaranja:hover {
background:#FF6600;
z-index:999999999;
}

.menuLaranja:hover {
background:#FF6600 url(images/cadastrar.png) no-repeat 45px 45px;
}

/*
DIVISAO VERDE: SISTEMA DE VERIFICAÇÃO
*/

.menuVerde {
width:150px;
height:150px;
position:relative;
top:450px;
left:-300px;
z-index:999;
background:#FF3333 url(images/excluir.png) no-repeat 45px 45px;
}

.divisaoVerde:hover, .menuVerde:hover {
z-index:999999999;
}

.divisaoVerde {
background:#FF3333;
min-height:344px;
z-index:998;
}

.divisaoVerde {
background:#FF3333;
z-index:998;
}

/*
DIVISAO VERMELHA: SISTEMA DE EXCLUSAO
*/

.menuVermelho {
width:150px;
height:150px;
position:relative;
top:300px;
left:-300px;
z-index:999;
background:#999900 url(images/verificar.png) no-repeat 45px 45px;
}

.divisaoVermelho:hover, .menuVermelho:hover {
z-index:999999999;
}

.divisaoVermelho {
background:#999900;
min-height:344px;
z-index:998;
}

.divisaoVermelho {
background:#999900;
z-index:998;
}


/*
CAMPOS DE ENTRADA: INPUT
*/

.campoLogin, .campoSenha, .campoEmail {
width:280px;
height:15px;
padding:20px;
}

.divBtLogin {
width:280px;
height:40px;
margin-top:38px;
text-align:center;
line-height:5%;
}

.divLogin {
width:280px;
margin:0 auto;
position:relative;
top:-50px;
}

.pPhraseLoginFirst, .pPhraseLoginSecond {
color:#f5f5f5;
}

.btLogin {
width:280px;
padding:15px 40px;
cursor:pointer;
background:#0099CC;
color:#ffffff;
}

.btSignUp {
width:280px;
padding:15px 40px;
margin-top:20px;
background:#0099CC;
color:#ffffff;
}

Adotada a solução, você deve permanecer os estudos para melhor adaptação de novos incrementos possíveis para que possa dar um plus do que foi desenvolvido e tornando personalizável cada concebimento que você possa adotar e acoplar ao seu gosto desde a origem percebida até a sua implantação.

Sobre
Últimos Posts

Fábio Pereira

Audaz sobre as incertezas e certezas de profissional de tecnologia da informação, transpassado para o lado da ciência moderna, incluindo não apenas o critério da análise, bem assim também como o seu desenvolvimento e infraestrutura, capaz de realizar procedimentos com média de 7.86 segundos de precisão sobre todo e qualquer problema de ordens lógica, e ávido sobre a importância da computação em nossas vidas.

Últimos posts por Fábio Pereira (exibir todos)

Como Melhorar o SEO do Seu Site em 2025 - 20 de novembro de 2024
SEO e o Algoritmo do Google: Como Funciona? - 20 de novembro de 2024
Dicas de Liderança para Empreendedores: Inspire sua Equipe - 4 de novembro de 2024

Artigo Relacionados:

A PromoveFácil orgulhosamente anuncia a produção e consumo de conteúdo de alta qualidade para atrair e engajar clientes. Nosso compromisso com o marketing de excelência se reflete em cada peça criada, visando promover marcas de forma eficaz e inovadora.