Ir para conteúdo
lucas pires

gente como eu faço para criar dessa forma esse login ????

Recommended Posts

57 minutos atrás, lucas pires disse:

gente como eu faço para criar dessa forma esse login do site https://www.americanas.com.br/  das lojas americanas me ajudem  ???? me ajudemmmmmm por favor 

 

Ta muito vaga sua pergunta meu brother, você diz sobre a função executada ao clicar no icone  igual a imagem abaixo?

 

image.png.dc66848b4d0a9bd867e5cc65c40cecd5.png

 

 

Ou um uma pagina de login igual  a abaixo?

image.png.bcc0baa748b8a93440d3ef9a11abef8f.png

image.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

tente fazer com :hover, basta criar o formulário e depois dar um 

opacity: 0;

 em seguida basta colocar

opacity: 1;

no :hover

 

EX:

 

form{
	width: 300px;
	height: 20px;
	opacity: 0;
	transition: 2s;
}

form:hover{
	opacity: 1;
	transition: 1s;
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
<style>
  .filho {display:none}
  .pai:hover > filho {display:block}
</style>
<div class="pai">
  coloque o mouse em cima de mim
  <div class="filho">
    eu apareço quando o mouse está em cima do div.pai
  </div>
</div>

Se for a questão de exibir um elemento quando o mouse está por cima é assim.

 

Agora se for o caso de criar toda a estrutura do HTML/CSS para ser igual ou semelhante as imagens citadas a coisa é um pouco mais longa.

Spoiler

<style>
  .posicao {
    float: right;
  }
  .pai {
    position: relative
  }
  .icone {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: red;
    margin-right: 30px
  }
  .filho {
    display: none;
    position: absolute;
    right: 35px;
    margin-top: 15px;
    width: 200px;
    border: 1px solid #000000
  }
  .filho:after, .filho:before {
    bottom: 100%;
    left: 90%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
  }
  .filho:after {
    border-color: transparent;
    border-bottom-color: #ffffff;
    border-width: 15px;
    margin-left: -15px
  }
  .filho:before {
    border-color: transparent;
    border-bottom-color: #000000;
    border-width: 16px;
    margin-left: -16px
  }

  .pai:hover > .filho {display:block}
</style>
<div class="posicao">
  <div class="pai">
    <div class="icone"></div>
    <div class="filho">
    Em caminho de paca, tatú caminha dentro?
    </div>
  </div>
</div>

 

 

Lógico que isso é só um exemplo de como fazer pois nem testei, mas seguindo a regra, vai fazer algo similar ao esperado pois criei um ícone uma box com a ceta para cima, para simular a questão.
 

Compartilhar este post


Link para o post
Compartilhar em outros sites
<!DOCTYPE html>
<html>
<head>
    <title>LUISFELIPERM</title>
</head>
<body>
<style>
*{box-sizing: border-box;font-family: Arial;}
    .menu{padding: 10px;position:relative;}
    .menu .link_login{color:#000;padding: 8px 16px;border:1px solid #999;text-decoration:none;}
    .menu .link_login:hover{background:#111;color:#fff;}
    .menu .login{display: none;
        width: 300px;
        border-left-width: 4px;background:#000;
        box-shadow: 0px 0px 5px rgba(0,0,0,0.9);
        position: absolute;top:100%;
    }
    .menu .login:before{
        content: " ";
        position: absolute;
        bottom: 100%;
        left: 20px;
        margin-left: -5px;
        border-width: 8px;
        border-style: solid;
        border-color: transparent transparent black transparent;
    }
    .menu .login form{width:90%;display:block;margin: 0px auto;}
    .menu .login form input{
        padding: 7px 12px;font-size: 16px;
        display: block;
        margin: 10px 0px;
        width: 100%;
        background: transparent;
        border: 1px solid #fff;color:#fff;outline:0;
    }
    .menu .login form button{display:block;width: 100%;padding:7px 16px;border: 1px solid #fff;font-size: 16px;cursor:pointer;background:#fff;}
    .menu .login form a{display:block;padding:8px 0px;color:#fff}
    .menu .link_login:hover + .login{display: block !important;}
</style>
<div class="menu">
    <div>
        <a href="#" class="link_login">Login</a>
        <div class="login">
            <form>
                <input type="text" name="" placeholder="Email">
                <input type="password" name="" placeholder="Senha">
                <button type="submit">Entrar</button>
                <a href="#">Cadastre-se</a>
            </form>
        </div>
    </div>
</div>


</body>
</html>

 

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

  • Conteúdo Similar

    • Por Luiz Fernando 111
      Caros amigos, estou tentando adicionar soma entre inputs do html e do javascript, mas com esse exemplo, apenas consegui colocar no input do html. Como faço para implementar no input do javascript e somar o valor junto com o Valor Total mostrar lucro quando foi debito e prejuizo quando for crédito ? Alguém poderia me dá help !!!
       
       

    • Por allancisneiro
      pessoal boa tarde, estou construindo um arquivo HTML, porém estou com um problema de alinhamento do texto apartir do segundo<H1>.  já tentei  usar o comando align:"left". mas não funcionu.
      quem puder ajudar agradeço. a ideia é alinhar tudo à esquerda
       
      este arquivo contém este código-fonte:
       
      <!DOCTYPE html>
      <html>
      <head>
      <title>Título da página</title>
      <meta charset="utf-8"/>
      </head>
      <body>
      <h1>Lista não ordenada</h1>
      <ul>
      <li>LIVERPOOL</li>
      <li>CHELSEA</li>
      <li>MANCHESTER CITY</li>
      <li>MANCHESTER UNITED</li>
      <li>ARSENAL</li>
      <li>TOTTENHAM</li>

      <h1 align="left">Lista ordenada</h1>
      <OL>
      <li>LIVERPOOL</li>
      <li>CHELSEA</li>
      <li>MANCHESTER CITY</li>
      <li>MANCHESTER UNITED</li>
      <li>ARSENAL</li>
      <li>TOTTENHAM</li>

      </OL>
          
      </body>
      </html>

    • Por Robson Augusto
      Galera se alguém souber o que ocorre,  é o seguinte, não acredito que possa ser Problema de SEO, mas vamos lá meu site anuncicarbh.com, não aparece em pesquisa feitas pelo computador, com a palavra chave "seminovos bh", ele aparece na primeira oscilando para segunda pagina do bing e yahoo, fazendo a pesquisa pelo telefone, ja no pc ele nao aparace mais no yahoo, mas continua a aparecer no bing, ja no google ele teve pequenas aparições na terceira página, agora em ambas as pesquisas de pc e celular ja não aparece mais no google... So aparece atualmente no google, pesquisando pelo nome do site... Alguem saberia me dizer o por que disso? será SEO?
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.