NavBar com Login e Senha

Front-end
, ,
#1

Boa tarde a todos,

Gostaria de saber como consigo colocar os campos de login e senha no header da minha página, igual ao facebook.

image
image.png1280×841 61.1 KB

#2

Não tem segredo, eis um possível exemplo de marcação:

<div class="topbar">
  <div class="topbar-inner">
    <div class="logo">Logo</div>

    <form class="login-form">
      <div class="input-container">
        <label for="email">Email</label>
        <input id="email" name="name" type="text">
      </div>

      <div class="input-container">
        <label for="password">Senha</label>
        <input id="password" name="password" type="password">
      </div>

      <input class="submit-button" type="submit" value="Entrar">
    </form>
  </div>
</div>

E aqui um possível estilo:

body {
  margin: 0;
}

.topbar {
  background-color: #faa;
}

.topbar-inner {
  max-width: 960px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.login-form {
  display: flex;
}

.submit-button {
  margin-left: 10px;
  align-self: flex-end;
}

.input-container + .input-container {
  margin-left: 10px;
}

.input-container label {
  display: block;
}

Aqui tem um exemplo funcional:

https://codepen.io/wldomiciano/pen/NQpqPv

1 curtida