Beautiful UI Login & Registration Html Boilerplate

How to design a Html Login and Registration Screen. This is a free Html & Registration Boilerplate for User Authentication. 

Html Login and Registration Bolierplate


The Css

/* Custom Font */
@font-face {
  font-family"SofiaPro";
  font-weightnormal;
  srcurl("./fonts/sofia__pro.otf");
}
/* Authentication Screen */
.auth__wrapper {
  background-color#f5f6fa;
  height100vh;
  overflowhidden;
}
.auth__container {
  width60%;
  marginauto;
  padding-top63px;
}
.auth__login,
.auth__register {
  margin-top50px;
}
.auth__wrapper p {
  font-size14px;
  font-family: SofiaPro;
  font-weightbold;
  margin-bottom30px;
}
.auth__input__wrapper {
  displaygrid;
  grid-template-columns40% 50%;
}
.auth_-wrapper form {
  displayflex;
  flex-directioncolumn;
}
.auth__wrapper input {
  padding10px 14px;
  background-color#fff;
  borderunset;
  border-radius2px;
  margin10px 0px;
}
.auth__wrapper input::placeholder {
  font-size14px;
  font-family: SofiaPro;
  color#000;
}
.auth__login {
  border-right7px solid #2ca5e0;
}
.auth__register {
  padding-left45px;
}
.auth__wrapper button {
  padding8px 29px;
  background-color#2ca5e0;
  borderunset;
  color#fff;
  font-size14px;
  font-family: SofiaPro;
  margin-top10px;
}


The HTML

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" />
    
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    
    <link rel="stylesheet" href="./styles.css">
    <title>Simple Login & Registration Screentitle>
    
  head>
  <body>
    <div className="container">
      <div className="auth__wrapper">
        <div className="auth__container">
          <div className="auth__logo">
            <img src="/images/logo.png" alt="Messenger" />
          div>
          <div className="auth__input__wrapper">
            <div className="auth__login">
              <p>Login to access Chatp>
              <form>
                <div className="form__input">
                  <input type="email" placeholder="Enter your email" />
                div>
                <div className="form__input">
                  <input type="password" placeholder="Enter your password" />
                div>
                <button type="submit">Loginbutton>
              form>
            div>
            <div className="auth__register">
              <p>Register to access Chatp>
              <form>
                <div className="form__input">
                  <input type="email" placeholder="Enter your email" />
                div>
                <div className="form__input">
                  <input type="password" placeholder="Enter your password" />
                div>
                <div className="form__input">
                  <input type="password" placeholder="Confirm Your password" />
                div>
                <button type="submit">Registerbutton>
              form>
            div>
          div>
        div>
      div>
    div>
  body>
html>


You can also download the full source code from Github

https://github.com/boltdsg/login-and-registration-boilerplate