How to create facebook login page using html and css
How to Create a Simple Login Page Using HTML and CSS
Introduction
HTML stands for HyperText Markup Language. This is the most important markup language that can be used to create a webpage. It is used to display text, image, audio, and video in a webpage.
CSS stands for Cascading Style Sheets. It is used to style HTML documents. CSS can make responsive web pages and is used for styling and its collection of formatting rules. It is used for designing purposes. The CSS extension is (.CSS).
There are three types of CSS:
-
Inline CSS
-
Internal CSS
-
External CSS
Step 1
Create a new folder and give a name to the folder. In the folder save an HTML and CSS file. After creating the folders, open the sublime text editor.
Step 2
Click File, Select New File, and Click Save. Give the file the name “index.html”.
Step 3
Next, click File, then New File, and click Save. Give the file the name “style.css”
Step 4
Now, link the HTML and CSS to the HTML file you just copied and paste this code in the heading tag:
- <head>
- <link rel="stylesheet" type="text/css" href="css/style.css"/>
- </head>
Step 5
Next, create a structure for the login page using HTML, Username and Password.
- <!DOCTYPE html>
- <html>
- <head>
- <title>Login Form</title>
- <link rel="stylesheet" type="text/css" href="css/style.css">
- </head>
- <body>
- <h3>Login Page</h3><br>
- <div class="login">
- <form id="login" method="get" action="login.
php"> - <label><b>User Name
- </b>
- </label>
- <input type="text" name="Uname" id="Uname" placeholder="Username">
- <br><br>
- <label><b>Password
- </b>
- </label>
- <input type="Password" name="Pass" id="Pass" placeholder="Password">
- <br><br>
- <input type="button" name="log" id="log" value="Log In Here">
- <br><br>
- <input type="checkbox" id="check">
- <span>Remember me</span>
- <br><br>
- Forgot <a href="#">Password</a>
- </form>
- </div>
- </body>
- </html>
Step 6
Next, write code in CSS to apply some style to the HTML so you can change the look of the login page.
- body
- {
- margin: 0;
- padding: 0;
- background-color:#6abadeba;
- font-family: 'Arial';
- }
- .login{
- width: 382px;
- overflow: hidden;
- margin: auto;
- margin: 20 0 0 450px;
- padding: 80px;
- background: #23463f;
- border-radius: 15px ;
- }
- h3{
- text-align: center;
- color: #277582;
- padding: 20px;
- }
- label{
- color: #08ffd1;
- font-size: 17px;
- }
- #Uname{
- width: 300px;
- height: 30px;
- border: none;
- border-radius: 3px;
- padding-left: 8px;
- }
- #Pass{
- width: 300px;
- height: 30px;
- border: none;
- border-radius: 3px;
- padding-left: 8px;
- }
- #log{
- width: 300px;
- height: 30px;
- border: none;
- border-radius: 17px;
- padding-left: 7px;
- color: blue;
- }
- span{
- color: white;
- font-size: 17px;
- }
- a{
- float: right;
- background-color: grey;
- }
Step 7
Before using CSS code, the output looked like this:
After using the CSS code, the output looks like this:
Summary
We have successfully created a Login page.
I hope this article is useful to you. If you have any comments in this article, please ask in the comment section.
How to Design Homepage like Facebook using HTML and CSS ?
|
css"
..."
png"
</Website Registration Form - 60 Free HTML5 and CSS3 Website Login Forms
Do you need a website registration form? We have compiled a list of 60 free login forms that you can use on your WordPress site, blog, forum, and more.
Each form is extensively tested to ensure that it works and that the source code is available.
- WordPress Login Customizer
- Creative Login Form
- Authorization form #1
- Authorization form #2
- Authorization form #3
- Authorization form #4
- Authorization form #5
- Authorization form #6
- Authorization form #6
- Authorization form 01 90 №8
- Authorization form №9
- Authorization form №10
- Authorization form №11
- Authorization form №12
- Authorization form №13
- Authorization form №14
- Form of authorization No. 15
- Form of authorization No. 16
- Form of authorization No. 17
- Form of authorization No. 18
- Form of authorization No. 19
- falling form of authorization
- Floating SIGN UP Form Login Form
- Flat Login – Sign Up Form
- Login With Self-Contained SCSS Form
- Animated Login Form
- Login Form Using CSS3 And HTML5
- Login With Shake Effect
The forms in this list are created using HTML/CSS.
But in this case, we are talking about the best WordPress UI customization plugin. It comes with several templates that can be further customized to match the site's design. With this plugin, you can get rid of the boring WordPress login page.
A simple yet creative login form created with HTML and CSS3. It can also be used as a registration form. This is our favorite template on this list.
We searched the web for really cool login forms, but finding them wasn't easy. So we decided to present you our own. Here are 20 login forms designed by our team.
A simple, creative and bright login form with a gradient background. You can use it for any purpose, such as authorization in a web service, mobile or desktop application.
Download
Preview
Minimalistic and sophisticated login form with button, gradient fill, animation and logo. Use it by changing the necessary elements.
Download
Preview
Login page with background image, shadow and hover effect for login button.
Download
Preview
You can download this web form and use it as you wish. It is fully adaptive.
Download
Preview
A beautiful and modern form with Facebook or Google login options. Its buttons have beautiful hover effects to provide users with a great user experience.
Download
Preview
If a web page is neat and beautiful, the login form should not differ from its design. Here is a form that will definitely meet your expectations.
Download
Preview
A form with three login options: Facebook, Twitter or email. And if the user doesn't have an account yet, you can link the form to the signup page.
Download
Preview
Another modern, trendy and beautiful login form. It looks especially good on mobile devices.
Download
Preview
If you want to get away from a pure white or one color design, you should pay attention to this form. It supports adding a background image or a gradient overlay.
There is also an option to sign in with Facebook or Google.
Download
Preview
This is the exact opposite of the previous version. It looks minimalist, but at the same time very neat.
Download
Preview
Instead of creating a form from scratch, you can use a great ready-to-use template like this one.
Download
Preview
A background image with a blue shadow overlay, a name with an avatar and input fields is the authorization form No. 12. Added a hover effect to the login button.
Download
Preview
A split screen template with one half for the image and the other half for the form.
Download
Preview
This collection contains both simple and more complex login forms. And template No. 14 is one of the minimalistic ones.
Download
Preview
Pretty minimalistic form, but you can add a banner at the top of it. With this small option, you can make the form more attractive.
Download
Preview
This is a login form with a full-screen image, above which are placed login and password fields, as well as a button with hover effect.
Download
Preview
To make your form more personal, you can use this template. It includes an image located on the side.
Download
Preview
If you want to stand out and keep originality, use the entry form №18. Some people like simple login pages, while others want the added benefits.
Download
Preview
Bright, energetic and exciting - that's all about this entry form. It is fully responsive, optimized for mobile devices and compatible with all major web browsers.
Download
Preview
Gradient background, black button with hover effect, login and password fields, and "Forgot your password?" All this is in the authorization form No. 20.
Download
Preview
The form is hidden unless the Login link is clicked.
A great feature for sites that want to do without a separate login page. You can display the form anywhere on the site with this powerful tool.
Download
Designed for subscription forms using tabs and labels.
Download
What used to stop people when they wanted to log in to a WordPress site was that it looked too simple. This form retains the popular design, but adds a color scheme to it.
Download
When you click the “Click me” button located in the upper right corner, the login form will be animated into a registration form using animation.
Download
This is a form created using SCSS. A CSS extension that adds new features and elegance to the base language. It allows you to use variables, nested rules, inline imports, and more.
Download
This is an animated login form, and the top of the “Hey you, Login already” transforms into a form when the button is clicked.
Download
An example of how to create a simple login form using HTML5 and CSS3.
It uses pseudo elements (:after and :before) to create the effect of multiple pages. This form uses HTML5 to make it easier to validate and submit data.
Download
If you entered the wrong password, you will be notified with a beautiful shake effect. A simple and effective solution.
Download
The block login form is a little surprise. Try the username “admin” and password “1234” to see it in action.
Download
A neat little login form. When you click the “LOGIN” button on the left, an authorization form will be displayed.
download
download
download
download
download
download
download
download
Download
download
9000Download
Download
Download
Download
Download
Download
Download
Download
Download
Download
Download
Download
Please publish your opinions on the current topic of the material.
Thank you so much for the comments, responses, likes, dislikes, subscriptions!
Vadim DvornikovAuthor-translator of the article "60 Free HTML5 And CSS3 Login Forms For Your Website 2018"
HTML, CSS and disappearing entry points to the industry - Web standards
Everyone is angry with CSS again. I won't even list the reasons. All in all, it boils down to the fact that CSS is quite simple, but at the same time quite complex. To the point where it's easier to wrap it in JavaScript to avoid public disturbance. You can read Chris Coyer's more meaningful take on The Great Divide.
Debates like this about tools, frameworks, and technologies are all over the place. I have been watching them all the time for the 20 years that I have been working on the web. Standard technologies de facto have their limitations, we encounter problems and want to solve them. Often we solve these problems by simply throwing everything away. Old things are terrible and were invented when there were no better alternatives! Now, with all our knowledge, we can do better. Let's reinvent the wheel!
We can see this in the world of data warehousing, where people avoid relational databases in every possible way, even though they most often need them.
We see this in the push for static sites. It all starts under the pretext of saving rendering speed in the absence of a database, and ends up recreating databases in the file system or using third-party services in an attempt to plug holes that a traditional CMS would do just fine.
There are exceptions in both scenarios described where the RDBMS (Relational DBMS) alternative is the correct solution. Static sites are great for some types of content. This is a good solution to some of the problems. However, I have seen many situations in which trying to use the latest technology led to a project falling into disrepair and ultimately requiring costly refactoring or a complete overhaul.
This constant reinvention of the wheel is our Achilles' heel. We are always optimistic and hope that something good will come of it, but most of the time it just leads to a mess. Teams are faced with projects over and over again that no one can fix because they, these projects, are based on a chain of little-known technologies. Companies often receive websites developed by contractors on technologies that have quickly sunk into oblivion. And when a business wants to update something, a new contractor offers it to redo it all over again.
However, when it comes to frameworks and approaches that make it difficult to write HTML and CSS, the problem becomes a little more significant than a business losing a couple of years of work and getting completely overhauled because it cannot support a rashly chosen framework.
All discussions of HTML and CSS directly affect the entry point to the developer profession. It doesn't matter if you are a front-ender or a back-ender, most of us who do not have a higher technical background education, began their acquaintance with the profession with easy-to-learn HTML and CSS. It's a magical feeling to see how your code works on a real page! We have already lost most of the entry points we had.
Gone are the parenting forums where people teach each other HTML and CSS in an attempt to create a family album. These people now use Facebook or may have started a blog with a default theme on Wordpress.com or SquareSpace. Gone are the people customizing their pages on MySpace or learning HTML on Neopets. There are no more people, mostly women, who got into the industry because they were forced to learn HTML, because maintaining the organization's website was part of the job of an administrator.
As this great thread highlights, bootcamps are the entry point for most people without a traditional education. They usually teach a development style based on a framework that will allow students to get a job as quickly as possible. However, based on questions from people who have been trained in this way, I see that the basics are often overlooked and put off until better times. We're doing these people a disservice if they end up in an environment where the basics never get it right, or worse, where HTML and CSS are completely devalued.
Due to my knowledge of HTML and CSS, I am comfortable with any changes on the web. I know from experience that this knowledge will allow me to easily switch and quickly master any novelties built around these technologies.
There is something amazing about the fact that, despite everything we have created over the past 20 years, I can teach any beginner how to create a page in HTML and CSS in a day. We don’t need to talk about tools and frameworks, learn how to create a pull request, or how to drag a bunch of code onto the computer using npm before starting. We only need a text editor and a couple of hours. And something will already appear on our page.
This is the real entry point and yes, if work is their goal, then in 2019year, they will have to quickly switch to the tools and technologies that are in demand among employers. But one way or another, all these tools produce HTML and CSS at the end. It is the foundation of everything we do. And this makes it unlikely to devalue those who have really deep knowledge.
If you have a working knowledge of the problems you've encountered while working with CSS, then you can create a really cool JavaScript solution to those problems. Many of us who work with CSS want to hear your ideas. However, if you start our conversation by admitting that you didn't really learn CSS before suggesting a replacement, or if I see you belittling me (or other people) for not knowing the framework you chose, then I'll be more skeptical. to your suggestions. I will not help you build a world that a person like me could never enter.
When you make programming skills a core component of every web developer's role, you turn the web into a programmer's sandbox. This is when you start thinking in object factories and complaining about "why the user can't update" and devaluing "soft and feminine" skills like design.
Asking the awesome question "how else are we supposed to build complex applications" when no one is talking about it at all.
