Webleb - Snippets de Código -

Video Publique Seu Código

Recomendado

12 June 2025

Modelo HTML de cartões de link para mídia social

9 May 2025

<html>
<head>
  <meta charset="utf-8" />
  <title>Webleb</title>
  <link href="/css/styles.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body class="align">
  <div class="grid">
    <form  method="POST" class="form login">
      <div class="form_field">
        <label><i class="fa fa-user" style="color: #606468;"></i></label>
        <input type="text" name="username" class="form_input" placeholder="Username" required>
      </div>
      <div class="form_field">
        <label><i class="fa fa-lock" style="color: #606468;"></i></label>
        <input type="password" name="password" class="form_input" placeholder="Password" required>
      </div>
      <div class="form_field">
        <button class="submitButton" type="submit">Submit</button>
      </div>
    </form>
    <p class="text--center">Not a member? <a href="https://www.web-leb.com/code">Register</a></p>
  </div>
</body>
</html>

styles.css

.align{
  display: grid;
  place-items: center;
}
.grid {
  inline-size: 90%;
  margin-inline: auto;
  max-inline-size: 20rem;
}
* {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
  font-size: 100%;
}
body {
  background: -webkit-linear-gradient(to right, #ffffff, #abbaab);
  background: linear-gradient(to right, #ffffff, #abbaab); 
  color: #606468;
  font-family: "Open Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  min-block-size: 100vh;
}
a {
  color: #606468;
  outline: 0;
  text-decoration: none;
}
input {
  background-image: none;
  border: 0;
  color: inherit;
  font: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  transition: background-color 0.3s;
}
input[type="submit"] {
  cursor: pointer;
  text-decoration: none;
}
.form {
  display: grid;
  gap: 0.875rem;
}
.form input[type="password"],
.form input[type="text"],
.submitButton {
  inline-size: 100%;
}
.form_field {
  display: flex;
}
.form_input {
  flex: 1;
}
.login {
  color: #eee;
}
.login label,
.login input[type="text"],
.login input[type="password"],
.submitButton {
  border-radius:0.25rem;
  padding: 1rem;
}
.login label {
  background-color: #363b41;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  padding-inline: 1.25rem;
}
.login input[type="password"],
.login input[type="text"] {
  background-color: #3b4148;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.login input[type="password"]:hover,
.login input[type="text"]:hover {
  background-color: #434a52;
}
.submitButton {
  background-color: #270cbf;
  color: #eee;
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
}
.submitButton:hover {
  background-color: #3200e6;
}
p {
  margin-block: 1.5rem;
}
.text--center {
  text-align: center;
}

Recomendado

Um código de Mete

Modelo HTML de cartões de link para mídia social

bandeira nacional

index.html

styles.css

main.js

Recomendado

Um código de Mete

Modelo HTML de cartões de link para mídia social

bandeira nacional

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js