How to Create Facebook Login Page
with HTML& CSS
In this blog entry, I'll direct you through how to make a responsive Facebook login page utilizing just HTML and CSS. This venture is novice cordial, permitting you to acquire involved insight with these fundamental dialects and styles.
In the meantime, we'll investigate different HTML labels, like headers, structures, data sources, and connections. We'll likewise plunge into CSS properties to style our login structure, including variety, foundation, and textual style decision, and make it responsive for all gadgets.
How to Create Facebook Login Page with HTML& CSS Video Tutorial
Create Facebook Login Page with HTML& CSS [Source Codes]
To create a Facebook login page using HTML and CSS, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source codes of this Border Loading Animation by clicking on the given download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Facebook Login Page With HTML And CSS</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="container flex">
- <div class="facebook-page flex">
- <div class="text">
- <h1>facebook</h1>
- <p>Facebook helps you connect and share <br> with the people in your life.</p>
- </div>
- <form action="#">
- <input type="email" placeholder="Email address or phone number" required>
- <input type="password" placeholder="Password" required>
- <div class="link">
- <button type="submit" class="login">Log in</button>
- <a href="#" class="forgot">Forgotten password?</a>
- </div>
- <hr>
- <div class="button">
- <a href="#">Create new account</a>
- </div>
- </form>
-
- </div>
- </div>
- <div class="reg-page">
- <p> <a href="">Create a Page</a>for a celebrity, brand or business.</p></div>
- </body>
- </html>
Now paste the following codes into your style.css file
- @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
-
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family: 'Roboto', sans-serif;
- }
- .flex {
- display: flex;
- align-items: center;
- }
- .container {
- padding: 0 15px;
- min-height: 100vh;
- justify-content: center;
- background: #f0f2f5;
- }
- .facebook-page {
- justify-content: space-between;
- max-width: 1000px;
- width: 100%;
- }
- .facebook-page .text {
- margin-bottom: 90px;
- }
- .facebook-page h1 {
- color: #1877f2;
- font-size: 4rem;
- margin-bottom: 10px;
- font-family: Klavika, sans-serif;
- }
- .facebook-page p {
- font-size: 1.75rem;
- white-space: nowrap;
- }
- form {
- display: flex;
- flex-direction: column;
- background: #fff;
- border-radius: 8px;
- padding: 20px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
- 0 8px 16px rgba(0, 0, 0, 0.1);
- max-width: 400px;
- width: 100%;
- }
- form input {
- height: 55px;
- width: 100%;
- border: 1px solid #ccc;
- border-radius: 6px;
- margin-bottom: 15px;
- font-size: 1rem;
- padding: 0 14px;
- }
- form input:focus {
- outline: none;
- border-color: #1877f2;
- }
- ::placeholder {
- color: #777;
- font-size: 1.063rem;
- }
- .link {
- display: flex;
- flex-direction: column;
- text-align: center;
- gap: 15px;
- }
- .link .login {
- border: none;
- outline: none;
- cursor: pointer;
- background: #1877f2;
- padding: 15px 0;
- border-radius: 6px;
- color: #fff;
- font-size: 1.25rem;
- font-weight: 600;
- transition: 0.2s ease;
- }
- .link .login:hover {
- background: #0d65d9;
- }
- form a {
- text-decoration: none;
- }
- .link .forgot {
- color: #1877f2;
- font-size: 0.875rem;
- }
- .link .forgot:hover {
- text-decoration: underline;
- }
- hr {
- border: none;
- height: 1px;
- background-color: #ccc;
- margin-bottom: 20px;
- margin-top: 20px;
- }
- .button {
- margin-top: 25px;
- text-align: center;
- margin-bottom: 20px;
- }
- .button a {
- padding: 15px 20px;
- background: #42b72a;
- border-radius: 6px;
- color: #fff;
- font-size: 1.063rem;
- font-weight: 600;
- transition: 0.2s ease;
- }
- .button a:hover {
- background: #3ba626;
- }
- .reg-page{
- border-top: none;
- color: #1c1e21;
- font-family: SFProText-Regular, Helvetica, Arial, sans-serif;
- font-size: 14px;
- font-weight: normal;
- padding-top: 0;
- text-align: end;
- margin-right: 250px;
- margin-top: -100px;
- }
- .reg-page a{
- text-decoration: none;
- color:#1c1e21;
- font-family: SFProText-Semibold, Helvetica, Arial, sans-serif;
- font-size: 14px;
- font-weight: 600;
- }
- .reg-page a:hover{
- text-decoration: underline;
- }
- @media (max-width: 900px) {
- .facebook-page {
- flex-direction: column;
- text-align: center;
- }
-
- .facebook-page .text {
- margin-bottom: 30px;
- }
- }
-
- @media (max-width: 460px) {
- .facebook-page h1 {
- font-size: 3.5rem;
- }
-
- .facebook-page p {
- font-size: 1.3rem;
- }
-
- form {
- padding: 15px;
- }
- .reg-page{
- margin-right:auto;
- margin-top: -150px;
- text-align:center;
- }
- }
If you face any difficulties while creating your Facebook login page or your code is not working as expected, you can download the source code files for this Facebook login page project for free by clicking the Download button.