Un code de Skyrreum

Ouvrir dans l'éditeur Publiez votre code

Recommandé

22 July 2025

Icône de chargement CSS Spinner

10 February 2025

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Login Or Sign</title>
      <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" />
      <link rel="stylesheet" href="/css/styles.css">
  </head>
  <body style="display:flex; align-items:center; justify-content:center;">
  <div class="login-page">
    <div class="form">
      <form class="register-form" method="POST">
        <h2><i class="fas fa-lock"></i> Register</h2>
        <input type="text" placeholder="Full Name *" required/>
        <input type="text" placeholder="Username *" required/>
        <input type="email" placeholder="Email *" required/>
        <input type="password" placeholder="Password *" required/>
        <button type="submit">create</button>
        <p class="message">Already registered? <a href="#">Sign In</a></p>
      </form>
      <form class="login-form" method="post">
        <h2><i class="fas fa-lock"></i> Login</h2>
        <input type="text" placeholder="Username" required />
        <input type="password" placeholder="Password" required/>
        <button type="submit" name="send2">login</button>
        <p class="message">Not registered? <a href="#">Create an account</a></p>
      </form>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="/js/main.js"></script>
  </body>
  </html>

CSS

@import url(https://fonts.googleapis.com/css?family=Poppins:300);

body{
      height: 100vh;
      overflow: hidden;
      font-family: "Poppins";
    background: #0e2941;
  }
  .login-page {
    width: 400px;
    padding: 8% 0 0;
    margin: auto;
  }
  .form {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    max-width: 400px;
    margin: 0 auto 100px;
    padding: 45px;
    text-align: center;
    border-radius: 15px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  }
  .form input {
    font-family: "Poppins", sans-serif;
    outline: 0;
    background: #f2f2f2;
    width: 100%;
    border: 0;
    border-radius: 7px;
    margin: 0 0 15px;
    padding: 15px;
    box-sizing: border-box;
    font-size: 14px;
    
  }
  .form button {
    font-family: "Poppins", sans-serif;
    text-transform: uppercase;
    outline: 0;
    background: #e30000;
    width: 100%;
    border: 0;
    padding: 15px;
    color: #FFFFFF;
    border-radius: 7px;
    font-size: 14px;
    -webkit-transition: all 0.3 ease;
    transition: all 0.3 ease;
    cursor: pointer;
  }
  .form button:hover,.form button:active,.form button:focus {
    background: #410e0e;
  }
  .form .message {
    margin: 15px 0 0;
    color: #b3b3b3;
    font-size: 12px;
  }
  .form .message a {
    color: #662323;
    text-decoration: none;
  }
  .form .register-form {
    display: none;
  }

Un code de Skyrreum

Recommandé

Icône de chargement CSS Spinner

Formulaire de connexion CSS

Site Web du blog de Daniel

HTML

CSS

JS

Recommandé

Icône de chargement CSS Spinner

Formulaire de connexion CSS

Site Web du blog de Daniel

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS