Hello friends how are you , Today in this post "Login form with Social media" we will learn how to create an Login from with social media using HTML and CSS. If you want to create a website then you can use this login form to make your website very attractive. If you wan to create something interesting using simple HTML and CSS then this post is for you.
If you want to understand this through video then watch this video i have explained it step by step live
Now i am going to explain step by step.
Step 1:Create a Folder: Just create a folder with any name and in any drive in your system, In my case my folder name is SocialLogin.
Step 2:Create an HTML file: Now open notepad and type the below code or you can copy this code for your personal use
<html> <head> <title>Social Login</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body{ background-image: url('bg.jpg'); display: flex; justify-content: center; font-family: Arial, Helvetica, sans-serif; background-position: center; background-size: cover; } *{ margin: 0; padding: 0; box-sizing: border-box; user-select: none; } .login { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 40px; color: white; font-family: Arial, Helvetica, sans-serif; background-color: rgba(0,0,0,0.7); border-radius: 5px; box-shadow: 1px 1px 20px cyan; display: flex; flex-direction: column; align-items: center; margin: 10px 0; } .login header{ margin-bottom: 25px; margin: 0 0 25px 0; } img{ position: relative; width: 80px; top: 50%; border-radius: 50%; box-shadow: 1px 1px 15px cyan; } .field { border: 1px solid cyan; border-radius: 50px; background-color: transparent; width: 100%; margin-bottom: 15px; display: flex; } .field span{ color: white; width: 40px; line-height: 45px; text-align: center; } .field input{ width: 100%; height: 45px; font-size: 1.1rem; padding: 5px; color: cyan; background-color: transparent; border: none; } .forgot-password { width: 100%; margin-bottom: 15px; } .forgot-password a{ color: white; text-decoration: none; } .forgot-password a:hover { text-decoration: underline; } .submit { display: flex; justify-content: center; width: 100%; height: 45px; margin-bottom: 25px; font-family: Arial, Helvetica, sans-serif; font-size: 1.2rem; color: white; background-color: transparent; border: 1px solid cyan; border-radius: 125px; } .submit:hover{ cursor: pointer; background-color: orangered; } .login-form-copy { margin-bottom: 15px; } .login-form_sign-up { text-decoration: none; color: rgb(18, 190, 190); } .social-icons{ display: flex; width: 100%; justify-content: space-between; padding-bottom: 5px; } .social-icon{ display: flex; align-items: center; justify-content: center; font-size: 1.4rem; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; margin-bottom: 25px; } .facebook{ background-color: #385998; } .instagram{ background: linear-gradient(rgb(243,5,171),rgb(205,95,4),yellow); } .twitter { background-color: #00ACEE; } .google { background-color: #CA3224; } .linkedin{ background-color: #0E76AB; } input:focus,input:hover,input:active { outline: none; } </style> </head> <body> <form action="" class="login"> <header><img src="login.png"></header> <div class="field"><span class="fa fa-user"></span><input type="text" placeholder="Email or Username"></div> <div class="field"><span class="fa fa-lock"></span><input type="password" placeholder="Password"></div> <div class="forgot-password"><a href="">Forgot password?</a></div> <input type="submit" class="submit" value="LOGIN"> <span class="login-form-copy">Or Login with</span> <div class="social-icons"> <div class="social-icon instagram"><span class="fa fa-instagram"></span></div> <div class="social-icon facebook"><span class="fa fa-facebook"></span></div> <div class="social-icon google"><span class="fa fa-google"></span></div> <div class="social-icon linkedin"><span class="fa fa-linkedin"></span></div> <div class="social-icon twitter"><span class="fa fa-twitter"></span></div> </div> <span class="login-form-copy">Don't have an account?<a href="" class="login-form_sign-up">Sign up</a></span> </form> </body> </html>
Now save this file with name login.html inside the created folder [SocialLogin]. Note:Don't forget to type .html after the file name because .html is the extension for HTML file.
Step 3:Download and store images: I have used two images to make this login form in which one image for background and another image for icon.If you want to use the same image then click here to download image. After downloading the image store it into the created folder SocialLogin. If you have any doubt then watch the above video i have explained everything live.
After doing these your created folder will look like below.
Note: Background Image name is bg.jpg and resolution is 1900x1200, Login icon image name is login.png and resolution is 500x500.
Step 4:Run HTML file: Now its time to run HTML file so right click on slide.html file and then select open with and then select chrome browser or you can select any browser for output.
You will get output screen like below image. For Live Practical click here to watch video
I hope now you can create "Login form with Social media ". If you have any doubt regarding this post or you want something more in this post then let me know by comment below i will work on it definitely.
Also Visit: Turn Light on Using HTML & CSS
Request:-If you found this post helpful then let me know by your comment and share it with your friend.
If you want to ask a question or want to suggest then type your question or suggestion in comment box so that we could do something new for you all.
If you have not subscribed my website then please subscribe my website. Try to learn something new and teach something new to other.
If you like my post then share it with your friends. Thanks😊Happy Coding.
0 Comments