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


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



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;
   background-color: #f0f2f5;
   overflow: hidden;

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

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

   font-size: 18px;
  border: 1px solid;
  padding: 20px 69px 20px;
  margin: 4px 0 0 17px;
  text-align: left;
  border-radius: 5px;
   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;
   right: 150px;
   top: 140px;
   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

8 Characteristics Of Modern Computer

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

Easy Light Bulb Project: HTML, CSS, and JavaScript

Fundamentals Of Computer

Supercharge Your Business: Digital Innovation Tactics

What is A Web Development Framework Software?

Building A Simple Analog Clock Using HTML, CSS, and JavaScript

Creating Mjölnir Thor Hammer Using HTML and CSS

Brief History Of Computer

How To Start Coding In 2024?