Close

Login Form

This is another example of a login page with the toggle panels, designed using CSS, JavaScript, HTML, and Bootstrap framework 4. The form is given two panels for sign in and sign up, and given the ability to toggle between the layers upon clicking on the buttons. The font style has been imported to the code with its URL. The JavaScript methods have been used to implement the functionality of the toggle layer. The body of the form is given the styles of align-items as center, font-family as 'Montserrat', sans-serif, font-size as 12px, background-color as #EDF2F0, and color as #B4B4B4. The main container is given a width as 1000px, height as 600px, and a background color as #FDFDFD. The switch panel is given a height as 100%, width as 400px, and the background color as linear-gradient(45deg, #44b390, #34A89A). The input text fields are displayed with the styles of width as 350px, height as 40px, font-size as 13px, letter-spacing as .15px, font-family as 'Montserrat', sans-serif; font color as #B4B4B4, and background-color as #F2F7F5. The button takes a transform effect as scale(1.015) in a hover event, and scale(0.9) in a focus event. Source: https://codepen.io/ricardoolivaalonso/pen/gOaRMww

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.