This is another example of a sign in form with a Forgot Password option, designed using CSS, HTML, and Bootstrap framework 4. The background image and Bootstrap styles have been imported to the code with their URLs. The form consists of two other internal forms; the sign-in form and the Forgot Password form. The body of the form is given the styles of font color as #edf3ff, background color as #c8c8c8, and font style as 600 16px/18px 'Open Sans',sans-serif. The text-transform style for the titles of the two forms is set as uppercase to automatically convert the text to uppercase. The tabs are given a font size of 22px, and a transform effect as rotateY(180deg), to create the rotating effect. The active tab takes the font color of #fff and the border color of #1161ee. The 'Submit' and 'Reset password' buttons are given a background color of #1161ee. Source: https://bootsnipp.com/snippets/BERlz

Login Form

4.3.1
This is an example of another login form, designed using CSS, HTML, and Bootstrap framework 4. The profile image, Bootstrap and JavaScript styles are imported to the code with their URLs. The background of the form is given a color as linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33)). The login card is given a style set of background-color as #F7F7F7, box-shadow as 0px 2px 2px rgba(0, 0, 0, 0.3), and border-radius as 2px. The profile image is given a height and a width of 96px, and the border-radius as 50% to get the circle shape. The input text fields take a border style of rgb(104, 145, 162), and a box-shadow style as inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162), in a focus event. The 'Login' and 'Register' buttons are created as a primary button and given a background color of rgb(104, 145, 162) and a font-size of 14px. The background color of the buttons get changed to rgb(12, 97, 33), in the active and hover modes. Source: https://bootsnipp.com/snippets/GXl8R
This is an example of another login and signup page, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The background image, Bootstrap, and JavaScript packages have been imported to the code with their URLs. The users are given the option to switch between login and signup forms by clicking on the 'Login' and 'Signup' buttons. The form with the input text fields changes from one form to another, upon clicking on the buttons. This functionality has been implemented with JavaScript methods. The body of the form is given a linear gradient background of linear-gradient(135deg, #cfd8dc 0%,#607d8b 100%,#b0bec5 100%). Both the Login and Signup forms are given a box-shadow style of 1px 10px 30px -10px rgba(0,0,0,0.5). The background images of the forms are given a grayscale filter. The titles of the two forms are displayed with the styles of font-weight as 400, and font color as #757575. Source: https://bootsnipp.com/snippets/3M90n
This is an example of a stylish login form, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The background image, Bootstrap styles, and JavaScript packages have been imported to the code with their URLs. The subtitle of the form is given a blinking animation which has been implemented by JavaScript methods. The background color of the body is set as black. The login card is given a height of 2px, a width of 1px, and a box-shadow style of 0 0 15px #66ffff. The input text fields are given a style set of width as 90%, height as 50px, border-radius as 10px, border as 4px solid #00cccc, background-color as #333333, and font color as white. In the focus mode, the text fields take a border style of 6px solid #00cccc. The 'Login' button is created with a style set of width as 90%, height as 50px, border-radius as 10px, border as 4px solid #00cccc, background-color as #333333, font color as white, and cursor style as pointer to get the hand cursor effect on hover. Source: https://bootsnipp.com/snippets/0BEmR
This is an example of a stylish registration page, designed using CSS, HTML, and Bootstrap framework 4. The background image, font style, and Bootstrap styles have been imported to the code with the URLs. The body of the form is given the styles of font-family as Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif, font-weight as 400, font-size as 15px, and font color as #1d3c41. The header title of the Login card is displayed with the styles of font-size as 48px, font color as RGB(6, 106, 117), font-family as 'FranchiseRegular','Arial Narrow',Arial,sans-serif, font-weight as bold, and text-align as center. The input text fields are given a border style of 1px solid RGB(178, 178, 178), which gets changed to 1px solid rgba(91, 90, 90, 0.7), in the focus mode. The user is redirected to the registration form, upon clicking on the 'Join Us' button. The input text fields are validated by making them required in HTML. Source: https://bootsnipp.com/snippets/QXpo5
This is an example of another stylish login form, designed using CSS, HTML, and Bootstrap framework 4. The background image, font style, and Bootstrap styles have been imported to the code with the URLs. The labels of the input fields in the form are given a floating animation, to be activated on the focus mode. The functionality of the labels is implemented by the JavaScript methods. The body of the form is given the styles of background color as #eee, font-family as roboto, and justify-content as center. The login card is given a box-shadow style of 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12). The logo in the login card is given an opacity value of 0.8. The input text fields are given the styles of font-size as 18px, border-bottom as 1px solid rgba(255, 255, 255, 0.3), and font color as #eee. The font-size of the text fields' labels is set as 18px, which gets changed to 14px, in a hover event. Source: https://bootsnipp.com/snippets/P2RAl
This is an example of another login form with tabs on top, designed using HTML, CSS, and Bootstrap framework 4. The CSS and Bootstrap styles have been imported to the code with their URLs. The form consists of two tabs, which opens up two login forms. The background of the form is set as linear-gradient(left, #3931af, #00c6ff), to get a linear gradient color. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the tabs, in an orderly manner. The input text fields are validated by making them required in HTML. The title of the forms is displayed using the font color of #e9ecef. The login button is given a font color of #0062cc, background color as white, and a cursor style as pointer to get the hand cursor effect in a hover event. Source: https://bootsnipp.com/snippets/8MVoQ
This is an example of an animated login form, designed using CSS, HTML, and Bootstrap framework 4. The images and Bootstrap styles have been imported to the code with their URLs. The form consists of two internal forms; the login form and the registration form. The user is given the option to switch between forms with the use of a toggle button. The form is given a background color as linear-gradient(left, #1143a6, #00c6ff). The image is given an animation effect of mover 1s infinite alternate, to implement the moving animation. The toggle tabs are given a background color as #0062cc. The header titles of the two forms are displayed with a font color of #1143a6. The input text fields are given the styles of background color as #f8f9fa, font-weight as bold, and font color as #383d41. The 'Register' button is created as a primary type button in HTML. Source: https://bootsnipp.com/snippets/qr52z
This is an example of another responsive login form, designed using CSS, HTML, and Bootstrap framework 4. The font style and Bootstrap styles have been imported to the code with their URLs. The body of the form is given a gradient background color of (radial, center center, 0px, center center, 100%, color-stop(1%,#0264d6), color-stop(100%,#1c2b5a)), and a font family style of 'FontAwesome', sans-serif. The LOGO is displayed with the styles of font color as #fff, font-size as 50px, and line-height as 125px. The input text fields are given the styles of background-color as #fff, font color as #000, height as 50px, and font-size as 24px. The input text fields are validated by making them required in HTML. The 'Submit' button is given a text-transform style as uppercase to automatically convert the text to uppercase, font-weight as bold, and background color as #000000, which gets changed to #d44179, in a hover event. Source: https://bootsnipp.com/snippets/AlkBV
This is an example of a login screen with a login form, designed using CSS, HTML, and Bootstrap framework 4. The font style, background image, Bootstrap, and JavaScript styles are imported to the code with their URLs. The form consists of two screens: the login screen and the login form. The login screen is given a carousel feature to automatically change between three slides. The body of the forms is given a background color of linear-gradient(to bottom, #FFB88C, #DE6262). The header title of the form is given the styles of margin-bottom as 30px, font-weight as 800, font-size as 30px, and color as #DE6262. The input text field labels in the login form are given a test-transform style as uppercase to automatically convert the text to uppercase. The 'Submit' button is given the styles of background color as #DE6262, font color as #fff, and font-weight as 600. Source: https://bootsnipp.com/snippets/GQ3Pl
This is an example of another login form with a linear gradient background, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The form is designed in a way where the user is directed to the login form, upon clicking on the Login button. The JavaScript methods have been used to resize the login form, and to implement the functionality of the 'Login', 'Logout', and 'Cancel' buttons. The user is shown the "logged in successfully' message and directed into another form if the details are properly entered. The user is shown a "Please enter user name and password" message if the details are incomplete. Then the user is given the option to logout using the 'Logout" button. The body of the form is given the styles of background as linear-gradient(90deg, #FF512F 10%, #DD2476 90%), and font-family as 'Open Sans', sans-serif. The successful notification is displayed with a background color of #3D9970, whereas the failed notification is displayed with a background color of #FF4136. Source: https://bootsnipp.com/snippets/k2bEV
This is an example of a Google style login form, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The profile image, Bootstrap and JavaScript styles are imported to the code with their URLs. The background of the form is given a linear gradient color as linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33)). JavaScript methods have been used to load the profile and form details. The login card is given a style set of background-color as #F7F7F7, box-shadow as 0px 2px 2px rgba(0, 0, 0, 0.3), and border-radius as 2px. The profile image is given a height and a width of 96px, and the border-radius as 50% to get the circle shape. The input text fields take a border style of rgb(104, 145, 162), and a box-shadow style as inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162), in a focus event. The 'Sign in' button is created as a primary button and given a background color as rgb(104, 145, 162) and a font-size as 14px. The button changes its background color to rgb(12, 97, 33), in the active and hover modes. The 'Forgot password' link also changes its font color to rgb(12, 97, 33), in a hover event. Source: https://bootsnipp.com/snippets/a6Pdk