Create Animated Login & sliding Signup Form using HTML, CSS & Javascript | Step by step tutorial
#html #CSS #javascript #codingwithfaisal #webdevelopment #webdesign
In this tutorial, you will learn how to create a modern animated login form with sign-up using HTML, CSS, and Javascript coding. When you click on the sign-up link, the sign-up form will appear, and when you click on the sign-in link, the sign-up form will appear with a beautiful sliding transition effect. When you hover the cursor over the form, an eye-catching animation with colorful effects will start. This could be useful for highlighting or drawing attention to certain elements on a webpage.
----------------------------------------------------------
⏰TIME STAMPS ⏰
--------------------------------------------------------
0:00 - Demo
0:20 - HTML Coding for login form
0:42 - Input tag with the required input text field in the HTML Login form
01:04 - Input tag for password with a required password field in HTML Login form
01:15 - Create a checkbox with the text "Remember me" in the HTML Login form
01:28- Create button in HTML form
01:34 - Create a Signup button link in HTML form
01:37 - Paragraph and anchor tag with Signup link in HTML Login form
01:48 - Link CSS stylesheet in HTML
01:56 - Start CSS Coding
02:28 - Apply CSS on body
02:58 - CSS on the container (wrapper)
03:46 - CSS on a form wrapper class
04:06 - CSS on the heading (Log in)
04:21 - CSS on input-group
04:35 - CSS on input-group label
05:13 - CSS on input fields
06:00 - CSS on the checkbox
06:10 - CSS on the checkbox labeled "Remember me"
06:20 - CSS on checkbox label input
06:24 - CSS on button
07:00 - CSS on sign up link
07:19 - CSS on paragraph tag inside the link
07:45 - Change the color of wrapper class
07:59 - Create a hyperlink on sign up
08:08 - Focus~label and valid~label on input fields of input groups
08:32 - Add transition
08:37 - Create signup form
09:35 - Link Javascript file
09:42 - Start Javascript coding
10:44 - Create sliding effect on form
12:52 - Hover animation in form
Subscribe to my channel to watch more videos on website design tutorials for beginners.