How To Create a Fake Facebook Login Clone Using Only HTML and CSS?

First of all these HTML elements into your HTML document.

Copy the code From Our Github

  <div><h1>Facebook</h1>

        <p>Connect with friends and the world<br> around you on Facebook.</p>
    </div>
    <div class="form">
        <form action="">
       <div>
        <input type="text" name="Username" id="Username" placeholder="Email or Phone Number">
       </div>
       <div>
        <input type="password" name="Password" id="Password" placeholder="Password">
       </div>
       <div>
        <input type="submit" value="Log In" class="submit">
       </div>

        </form>
    </div>

 

Then add this CSS code to your CSS file.

 *{
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   font-family: SFProDisplay-Regular, Helvetica, Arial, sans-serif;
}
body{
   background-color: #f0f2f5;
   overflow: hidden;
}


p{
   position: absolute;
font-size: 28px;   
   left: 190px;
   top: 286px;

}
div h1{
   color: #1877f2;
   font-size: 60px;
   position: relative;
   left: 200px;
   top: 200px;

}
#Password,#Username{
   font-size: 18px;
  border: 1px solid;
  padding: 20px 69px 20px;
  margin: 4px 0 0 17px;
  text-align: left;
  border-radius: 5px;
}
.submit{
   border: 1px solid;
  padding: 20px 150px;
  margin: 4px 0 0 15px;
  background-color: #1877f2;
  font-family: arial;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 5px;
}
.form{
   position:absolute;
   right: 150px;
   top: 140px;
}
form{
   align-items: center;
    background-color: #fff;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
    box-sizing: border-box;
    margin: 40px 0 0;
    padding: 20px 0 28px;
    width: 396px;
}