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

How To Create A Magic 8 Ball Using HTML, CSS, and JavaScript?

4 Website To Use If You Use The Internet

Computer Hardware and Software

Best Practices for Writing Clean and Efficient Code

Top Programming Languages to Learn in 2024

Harnessing Web Updates to Elevate Your Small Business

Does My Smartphone Listen To Me?

How To Create A Loader Using Only HTML and CSS?

Introduction To Web Development?