How to make Facebook Login Page in html and css

Html part

<!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">
    <title>Facebook</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <h1 class="heading">Facebook</h1>
        <h5 class="second">connect with friends and the world
            around you on Facebook
        </h5>
        <div class="box">
            <input class="int" type="Email" placeholder="Email or Number">
            <input class="int" type="password" placeholder="password">
            <button class="btn">Log In</button>
            <p class="text-center">Forgot Password?</p>
            <div class="line"></div>
            <div class="extra">
                <button class="btn-down">Create new account</button>
            </div>
        </div>
        <div class="text-down">
            <p> 
           <b> create a page </b>for a celebrity, brand or business.</p>
        </div>
    </div>
        <footer>
            <div class="footerhd">
                <p>English (US)
                    नेपाली
                    हिन्दी
                    Español
                    Português (Brasil)
                    日本語
                    Français (France)
                    Deutsch
                    Italiano
                    العربية
                    中文(简体)
                </p>
            </div>
                <div class="footersecond">
                <p> Sign UpLog InMessengerFacebook LiteWatchPlacesGamesMarketplaceFacebook
                    PayJobsOculusPortalInstagramBulletinLocalFundraisersServicesVoting Information CenterGroupsAboutCreate
                    AdCreate PageDevelopersCareersPrivacyCookiesAd ChoicesTermsHelpSettings
                </p>
            </div>
                
                <div class="trademark">
                <p>© 2021 </p>
            </div>
        </footer>
</body>

</html>

CSS part

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background: #f1f4f6;
  min-height: 100vh;
}

.heading{
  font-size: 4em;
  text-transform: lowercase;
  font-weight: bolder;
  color: #2769ec;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  text-align: center;
    
  transform: translateY(200px) translateX(-400px);
  
}
.second{
  font-size: 2.2em;
 line-height: 30px;
  width: 500px;
  position: relative;
  top:200px;
  left: 40px;
  /* text-align: center; */
  font-family: 'Times New Roman', Times, serif;
  font-weight: 100;
margin-left: 210px;
}
.box{
  width: 420px;
  height: auto;
margin-top: -10px;
  border-radius: 8px;
  background: #ffff;
 transform: translateX(880px);
  
  box-shadow: 2px 2px 8px #8c8f90;
 
 padding: 0 12px;

}
.int{
  display: block;
 padding: 10px 20px;
 font-size: 1.2em;
 margin-top: 20px;
 position: relative;
 top: 20px;
 /* left: 30px; */
font-weight: 500;
 width: 100%;
 border-radius: 5px;
outline: none;
opacity: .5;
border-color: rgba(10, 10, 10, 0.383);

}
.btn{
  width: 100%;
  padding: 13px 20px;
  margin-top: 40px;
  background: #2769ec;
  font-size: 1.6em;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-family: 'Courier New', Courier, monospace;
  color: #fff;
  font-weight: bold;
}
.text-center{
  font-size: 1.2em;
  color:rgb(14, 100, 238) ;
  text-align: center;
  margin-top: 13px;
}
.line{
  margin-top: 22px;
  border-bottom: 1px solid rgba(19, 20, 20, 0.158) ;
}
.btn-down{
  padding: 15px 18px;
 margin-left: 70px;
 margin-top: 10px;
  border-radius: 5px;
  border: none;
  background: rgb(53, 190, 48);
  font-size: 1.3em;
  color: #fff;
  cursor: pointer;
}
.extra{
  padding: 20px;
}
.text-down{
  font-size: 1.2em;

font-weight: 500;
 
  position: relative;
  top: 30px;
  left: 200px;
  font-family: 'Times New Roman', Times, serif;
transform: translateX(705px);

}
footer{
 
  position: relative;
  top: 200px;
  background: #ffffff;
  padding: 18px 200px;
  opacity: .5;
  opacity: .5;
  box-shadow: 10px 10px 15px #ffffff;
}
.footerhd {
  line-height: 50px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.322);
}
.footersecond{
  line-height: 30px;
  /* border-bottom: 1px solid rgba(0, 0, 0, 0.322); */
  /* padding: 10px; */
}
.trademark{
  line-height: 30px;
}

CodeWithCreativity

Search This Blog

How To Design Facebook Login page in Html and Css.

How to make Facebook Login Page in html and css

Html part

CSS part

Comments

Post a Comment