स्काईरियम द्वारा एक कोड

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

28 December 2024

<!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;
  }

स्काईरियम द्वारा एक कोड

अनुशंसित

mematixd3162 द्वारा एक कोड

HTML बटन कोड उदाहरण

मेटेहन द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

mematixd3162 द्वारा एक कोड

HTML बटन कोड उदाहरण

मेटेहन द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS