Tela de Login

 

Nesta postagem, apresentamos uma tela de login moderna e estilizada. A interface é composta por elementos cuidadosamente projetados para proporcionar uma experiência de login intuitiva e agradável.

A tela de login possui um contêiner com um fundo elegante de cor sólida (rgba(17, 24, 39, 1)) e bordas arredondadas (border-radius: 0.75rem). O texto é exibido em um estilo contrastante para garantir legibilidade.

No centro da tela, você encontrará o título "Login" (Login), destacado com um tamanho de fonte grande (font-size: 1.5rem) e negrito (font-weight: 700). O título está alinhado ao centro (text-align: center) para atrair a atenção do usuário.

Logo abaixo do título, há um formulário (form) com campos para "Username" (Nome de Usuário) e "Password" (Senha). Cada campo de entrada (input) possui uma etiqueta (label) descritiva para orientar o usuário. Os campos de entrada têm uma aparência agradável, com bordas arredondadas (border-radius: 0.375rem) e uma cor de fundo escura (rgba(17, 24, 39, 1)). Quando em foco, a cor da borda muda para um tom de roxo (rgba(167, 139, 250)).

Além disso, há um link "Forgot Password?" (Esqueceu a senha?) posicionado à direita do campo de senha, permitindo que os usuários solicitem uma redefinição de senha, caso necessário.

No final do formulário, há um botão de "Sign in" (Entrar) para enviar as credenciais e fazer login. O botão é destacado e possui um estilo visual para indicar sua função.

Abaixo do formulário, há uma seção "Login with social accounts" (Entrar com contas sociais), que é separada por duas linhas horizontais estilizadas. Essa seção apresenta ícones de redes sociais, como Google, Twitter e GitHub, para permitir que os usuários façam login usando suas contas nessas plataformas. Os ícones são exibidos como botões interativos.

No rodapé da tela, há uma mensagem adicional: "Don't have an account? Sign up" (Não possui uma conta? Cadastre-se). Essa mensagem é acompanhada de um link (a) que permite que os usuários acessem a página de cadastro.

Em suma, essa tela de login combina um design atraente com funcionalidade prática, oferecendo aos usuários uma experiência de login agradável e simplificada. 💫🚀

DEMO

Login

Username

Password

Forgot Password ?

Login with social accounts

Don't have an account?
Sign up

Código:

  	
		    <style>
        .form-container {
            width: 320px;
            border-radius: 0.75rem;
            background-color: rgba(17, 24, 39, 1);
            padding: 2rem;
            color: rgba(243, 244, 246, 1);
        }
        .title {
            text-align: center;
            font-size: 1.5rem;
            line-height: 2rem;
            font-weight: 700;
        }
        .form {
            margin-top: 1.5rem;
        }
        .input-group {
            margin-top: 0.25rem;
            font-size: 0.875rem;
            line-height: 1.25rem;
        }
        .input-group label {
            display: block;
            color: rgba(156, 163, 175, 1);
            margin-bottom: 4px;
        }
        .input-group input {
            width: 100%;
            border-radius: 0.375rem;
            border: 1px solid rgba(55, 65, 81, 1);
            outline: 0;
            background-color: rgba(17, 24, 39, 1);
            padding: 0.75rem 1rem;
            color: rgba(243, 244, 246, 1);
        }
        .input-group input:focus {
            border-color: rgba(167, 139, 250);
        }
        .forgot {
            display: flex;
            justify-content: flex-end;
            font-size: 0.75rem;
        }
        .social-message {
            display: flex;
            align-items: center;
            margin-top: 1.5rem;
        }
        .line {
            flex-grow: 1;
            height: 1px;
            background-color: rgba(156, 163, 175, 1);
        }
        .message {
            margin: 0 0.5rem;
            font-size: 0.875rem;
            color: rgba(156, 163, 175, 1);
        }
        .social-icons {
            display: flex;
            justify-content: center;
            margin-top: 1.5rem;
        }
        .icon {
            margin: 0 0.5rem;
            background: none;
            border: none;
        }
        .signup {
            text-align: center;
            font-size: 0.875rem;
            margin-top: 1.5rem;
            color: rgba(156, 163, 175, 1);
        }
    </style>  	

	

  	
		    <div class="form-container">
        <p class="title">Login</p>
        <form class="form">
            <div class="input-group">
                <label for="username">Username</label>
                <input type="" name="username" id="username" placeholder="" />
            </div>
            <div class="input-group">
                <label for="password">Password</label>
                <input type="password" name="password" id="password" placeholder="" />
                <div class="forgot">
                    <a rel="noopener noreferrer" href="#">Forgot Password ?</a>
                </div>
            </div>
            <button class="sign">Sign in</button>
        </form>
        <div class="social-message">
            <div class="line"></div>
            <p class="message">Login with social accounts</p>
            <div class="line"></div>
        </div>
        <div class="social-icons">
            <button aria-label="Log in with Google" class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="w-5 h-5 fill-current">
                    <path d="M16.318 13.714v5.484h9.078c-0.37 2.354-2.745 6.901-9.078 6.901-5.458 0-9.917-4.521-9.917-10.099s4.458-10.099 9.917-10.099c3.109 0 5.193 1.318 6.38 2.464l4.339-4.182c-2.786-2.599-6.396-4.182-10.719-4.182-8.844 0-16 7.151-16 16s7.156 16 16 16c9.234 0 15.365-6.49 15.365-15.635 0-1.052-0.115-1.854-0.255-2.651z"></path>
                </svg>
            </button>
            <button aria-label="Log in with Twitter" class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="w-5 h-5 fill-current">
                    <path d="M31.937 6.093c-1.177 0.516-2.437 0.871-3.765 1.032 1.355-0.813 2.391-2.099 2.885-3.631-1.271 0.74-2.677 1.276-4.172 1.579-1.192-1.276-2.896-2.079-4.787-2.079-3.625 0-6.563 2.937-6.563 6.557 0 0.521 0.063 1.021 0.172 1.495-5.453-0.255-10.287-2.875-13.52-6.833-0.568 0.964-0.891 2.084-0.8913.303 0 2.281 1.161 4.281 2.916 5.457-1.073-0.031-2.083-0.328-2.968-0.817v0.079c0 3.181 2.26 5.833 5.26 6.437-0.547 0.145-1.131 0.229-1.724 0.229-0.421 0-0.823-0.041-1.224-0.115 0.844 2.604 3.26 4.5 6.14 4.557-2.239 1.755-5.077 2.801-8.135 2.801-0.521 0-1.041-0.025-1.563-0.088 2.917 1.86 6.36 2.948 10.079 2.948 12.067 0 18.661-9.995 18.661-18.651 0-0.276 0-0.557-0.021-0.839 1.287-0.917 2.401-2.079 3.281-3.396z"></path>
                </svg>
            </button>
            <button aria-label="Log in with GitHub" class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="w-5 h-5 fill-current">
                    <path d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.8592.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z"></path>
                </svg>
            </button>
        </div>
        <p class="signup">Don't have an account?
            <a rel="noopener noreferrer" href="#" class="">Sign up</a>
        </p>
    </div>
	

Se houver alguma dificuldade, por favor, deixe aqui nos comentários, eu vou responder o mais rápido que poder. Muito obrigado e boa sorte.

Eléctron

O Eléctron permite criar aplicativos multiplataforma, usando tecnologias web como HTML, CSS e JavaScript, fornecendo a base para construir aplicativos de desktop com facilidade. Ele é amplamente utilizado por desenvolvedores para criar aplicativos populares em várias áreas, oferecendo uma experiência nativa aos usuários em diferentes sistemas operacionais.

Se você está interessado em desenvolver aplicativos de desktop robustos e intuitivos, o Electron é uma ótima escolha, e seu código e documentação podem ser encontrados no repositório oficial do GitHub.

Senha: ultimorecursoh.com

BAIXAR PROGRAMA

Os programas oferecidos em nosso site são 100% seguros, baixados do site oficial e não os modificamos. Nosso objetivo é compartilhar essas ferramentas com segurança, garantindo a integridade dos arquivos.

Como adicionar um formulário de contato

Bem-vindo(a) à mais uma postagem, onde vamos te ensinar como adicionar um formulário de contato ao seu blog no Blogger! Ter um formulário de contato é uma ótima maneira de facilitar a comunicação com seus leitores e receber feedbacks, perguntas ou até mesmo oportunidades de colaboração. Não se preocupe se você não possui conhecimento avançado em programação.

Então, vamos começar a aprimorar seu blog e facilitar a comunicação com seus leitores!

Este é o exemplo do formulário:

Email

Mensagem

Passo 1:  Acessar a seção de Páginas

No painel de controle do seu blog, localize a seção "Páginas" no menu à esquerda e clique nela. Isso abrirá a lista de páginas existentes no seu blog.

Passo 2: Criar uma nova página

No canto superior direito da lista de páginas, você encontrará o botão "Nova página". Clique nele para começar a criar uma nova página.

Passo 3: Preencher os detalhes da página

Uma nova janela será aberta, onde você poderá preencher os detalhes da sua página. Insira um título para a página no campo "Título da página". Este será o texto exibido na barra de título da página.

Passo 4: Ativar a visualização de HTML

Agora, para ativar a visualização de HTML, clique no botão "Visualizar" na parte superior da janela de criação da página. Ao clicar no botão "Visualizar", a janela mudará para a visualização de HTML, e cole o codigo abaixo:

  <html lang="pt-br">
  <head>
    <style>
      .form-container {
        width: 400px;
        background: linear-gradient(#212121, #212121) padding-box,
          linear-gradient(145deg, transparent 35%,#e81cff, #40c9ff) border-box;
        border: 2px solid transparent;
        padding: 32px 24px;
        font-size: 14px;
        font-family: inherit;
        color: white;
        display: flex;
        flex-direction: column;
        gap: 20px;
        box-sizing: border-box;
        border-radius: 16px;
      }

      .form-container button:active {
        scale: 0.95;
      }

      .form-container .form {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      .form-container .form-group {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .form-container .form-group label {
        display: block;
        margin-bottom: 5px;
        color: #717171;
        font-weight: 600;
        font-size: 12px;
      }

      .form-container .form-group input {
        width: 100%;
        padding: 12px 16px;
        border-radius: 8px;
        color: #fff;
        font-family: inherit;
        background-color: transparent;
        border: 1px solid #414141;
      }

      .form-container .form-group textarea {
        width: 100%;
        padding: 12px 16px;
        border-radius: 8px;
        resize: none;
        color: #fff;
        height: 96px;
        border: 1px solid #414141;
        background-color: transparent;
        font-family: inherit;
      }

      .form-container .form-group input::placeholder {
        opacity: 0.5;
      }

      .form-container .form-group input:focus {
        outline: none;
        border-color: #e81cff;
        background-color: transparent;
      }

      .form-container .form-group textarea:focus {
        outline: none;
        border-color: #e81cff;
        background-color: transparent;
      }

      .form-container .form-submit-btn {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        align-self: flex-start;
        font-family: inherit;
        color: #717171;
        font-weight: 600;
        width: 40%;
        background: #313131;
        border: 1px solid #414141;
        padding: 12px 16px;
        font-size: inherit;
        gap: 8px;
        margin-top: 8px;
        cursor: pointer;
        border-radius: 6px;
      }

      .form-container .form-submit-btn:hover {
        background-color: #fff;
        border-color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="form-container">
      <form class="form">
        <div class="form-group">
          <label for="email">Email</label>
          <input id="email" name="email" required="true" type="text" />
        </div>
        <div class="form-group">
          <label for="textarea">Mensagem</label>
          <textarea cols="50" id="textarea" name="textarea" required="true" rows="10"></textarea>
        </div>
        <button class="form-submit-btn" type="submit">Enviar</button>
      </form>
    </div>
  </body>
</html>
  
  

Na visualização de HTML, você pode editar o código HTML da sua página conforme necessário. Você pode adicionar ou modificar elementos. Certifique-se de ter conhecimento em HTML antes de fazer alterações nesta visualização.

Passo 5: Salvar as alterações

Após concluir as edições na visualização de HTML, clique no botão "Salvar" ou "Publicar" para salvar as alterações e criar a nova página. Agora sua página de contacto está criada e pronta para ser exibida no seu blog.

Para que este formulário funcione corretamente, é necessário configurá-lo com o formsubmit. Para aqueles que não sabem como configurar o formulário, basta deixar um comentário neste post indicando que não sabe, e eu irei ajudar com as instruções de configuração.

Por que é importante ter um formulário de contato personalizado em um site?

Ter um formulário de contato personalizado em um site é importante porque oferece uma maneira conveniente para os visitantes entrarem em contato com o proprietário do site. Ele permite que os usuários enviem mensagens diretamente, sem precisar recorrer a outros métodos de comunicação, como e-mail ou telefone. Um formulário de contato personalizado também pode solicitar informações específicas, facilitando a organização e a resposta eficiente às consultas dos usuários.

Quais são os benefícios de um formulário de contato personalizado para a experiência do usuário?

Um formulário de contato personalizado melhora a experiência do usuário ao oferecer uma interface amigável e direta para entrar em contato com o proprietário do site. Os visitantes podem preencher os campos necessários de forma fácil e rápida, sem a necessidade de copiar e colar endereços de e-mail ou alternar entre aplicativos de mensagens. Além disso, um formulário de contato personalizado pode incluir recursos como validação de dados em tempo real, confirmações automáticas de envio e mensagens de sucesso, garantindo uma interação suave e sem problemas.

Como um formulário de contato personalizado pode aumentar as taxas de conversão ou leads?

Um formulário de contato personalizado pode aumentar as taxas de conversão ou leads, pois fornece uma maneira direta e conveniente para os usuários expressarem seu interesse ou fazerem perguntas sobre produtos, serviços ou outras informações relevantes. Ao otimizar o formulário com campos relevantes e intuitivos, é possível coletar informações valiosas sobre os visitantes, permitindo o acompanhamento posterior e a criação de oportunidades de negócios.

Como um formulário de contato personalizado pode contribuir para a imagem de marca de um site?

Um formulário de contato personalizado pode contribuir para a imagem de marca de um site ao refletir os valores e a identidade visual da marca. Ele pode ser projetado com cores, fontes e elementos gráficos que estejam em consonância com a identidade visual da marca, transmitindo uma aparência profissional e consistente. Além disso, a personalização do formulário, como incluir campos específicos relacionados aos produtos ou serviços oferecidos, demonstra atenção aos detalhes e um compromisso em fornecer uma experiência personalizada aos usuários, o que fortalece a percepção da marca como confiável e orientada ao cliente.