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


Trending Posts

5 Awesome Computer Shortcut Key Tricks You Must Try

What Are The Use of Function Keys F1 to F12 on The Keyboard?

Is Web Development Dying In 2022?

Why iPhones Don't Have Memory Card Slots?

Why Do All Celebrities Use iPhones?

12MP vs 48MP vs 64MP vs 108MP | Does More Megapixel Equal Better Image Quality?

5 Tips To Become A Computer Genius | How To Become A Computer Genius?

Can I Start Coding At The Age of 30, 40 or 50?

How To Make Your Computer Fast?

How To Take Screenshot On HP, Dell, Asus Laptop And PC?