Hello, readers, I am back with another amazing project using HTML and CSS this project is named “Twitter Login Page Design Using HTML and CSS only” it is very simple to create a Twitter login page clone within a few minutes and it is also the best projects as a practice if you are learning a web development like HTML, CSS and JavaScript languages.
I also create a complete Animated Login Form Design using HTML and CSS if you want to apply animation in your design so check out this project.
In this design, you see one Twitter logo at the top of the page and after that three sign-in options one is Sign in with Google, Sing in with Apple and username or password, and the last option forget the password and Don’t have an account.
How to Create Twitter Login Page Using HTML CSS
- Within the <head> tag, add a <title> tag to specify the title of the page, and add a <style> tag to define the styles for the page.
- In the <body> tag, create a container <div> with a class of “container”. This <div> will hold the content of the login page.
- Within the container <div>, add a <h1> tag for the title of the login page.
- Add a <form> tag for the login form, and within the form, add two <input> elements for email or phone number and password.
- Style the form and its elements using CSS in the <style> tag. Set the width, padding, font size, margin, border, and border radius for the <input> elements.
- Add a submit button to the form with the value of “Log in”. Style the submit button with a background color, color, padding, border radius, font size, font weight, and cursor.
- Add a hover effect to the submit button to change the background color when the mouse pointer is over it.
- Save the HTML file and open it in a browser to see the Twitter log in page.
So this is a simple method to create a login page design using HTML and CSS within a few minutes If you do not understand these steps so don’t worry about this I also provide the complete source code of all my projects simple copy-paste code and use it according to your requirements.
Video Tutorial – Twitter Login Page Using HTML CSS
If you are a beginner in coding and programming and you want to learn in-depth so please watch this video it is very helpful for you.
This Video was created by EasyTutorials Please Subscribe to this channel for Coding related stuff like this.
Source Code Of Twitter Login Page Clone
Here is the complete source code of Twitter Login Page Clone using HTML and CSS first you need to make two files the first file is for HTML and the other file is for CSS then copy and paste the given code into your files
HTML FILE
Create a file index.html then copy the given and paste it into your HTML file make sure your file extension is (.html)
<!DOCTYPE html> <!-- Created by Coding Pakistan --> <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>Twitter Login Form Using HTML CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="box box-one"> <i class="fab fa-twitter"><img src="https://img.icons8.com/color/50/000000/twitter--v1.png"/></i> <button> <img src="google.png" width="19"> <span>Sign in with Google</span> </button> <button> <img src="apple.png" width="19"> <span>Sign in with Apple</span> </button> </div> <h5>Or</h5> <div class="box box-two"> <form> <input type="text" placeholder="Phone,email, or username"/> </form> <button class="next-btn">Next</button> <button>Forget password</button> </div> <p>Don't have an account <a href="#">Sign Up</a></p> </div> </body> </html>
CSS FILE
Create a file style.css then copy the given and paste it into your CSS file make sure your file extension is (.css)
/* Created by Coding Pakistan */
body{
background-color: rgb(219, 217, 217);
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #fff;
width: 450px;
height: 550px;
border-radius: 20px;
box-shadow: 0 10px rgb(110, 110, 110,.2);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: 'Poppins', sans-serif;
}
.box, .box button{
display: flex;
align-items: center;
}
.box{
width: 300px;
height: 240px;
flex-direction: column;
justify-content: space-evenly;
}
.box button{
width: 300px;
height: 40px;
background-color: #fff;
outline: none;
font-weight: bold;
border: 1px solid rgb(211, 210, 210);
border-radius: 20px;
justify-content: center;
font-family: 'Poppins', sans-serif;
}
.box-one button img{
margin: 0 .5rem;
}
.box-one i{
color: #00acee;
font-size: 1.8rem;
}
.box-two input{
position: relative;
width: 300px;
height: 55px;
outline: none;
border: 1px solid rgb(211, 210, 210);
border-radius: 4px;
padding-left: 10px;
}
.box-two input label{
position: absolute;
top: 0;
}
.box-two input::placeholder{
font-size: 1rem;
}
.box-two input:focus{
border: 1px solid #00acee;
}
.box-two .next-btn{
background-color: #121212;
color: #fff;
}
.container p{
font-size: .7rem;
color: rgb(138, 136, 136);
}
.container p a{
text-decoration: none;
color: #00acee;
}
You Might Like This
Conclusion
The Twitter log in page design using HTML and CSS with source code provides a comprehensive guide to creating a visually appealing and functional login page. The article outlines the steps to create a user-friendly interface focusing on simplicity and usability.
The source code provided can be used as a starting point for further customization and adapted to suit different web design needs. The design can be used for personal or commercial projects, making it a valuable resource for web developers and designers.