This is another example of a stylish sign in/ sign up page, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The form consists of two panels to sign in and signup and is given the ability to switch the panels upon clicking on the buttons. The JavaScript methods have been used to implement the functionality of the toggle panels. The form is given a font family style as "Montserrat", sans-serif. The information container is given a background color as #ebecf0, and a box-shadow style as -5px -5px 10px #fff, 5px 5px 10px #babebc. The input text fields and the social media icons are also given a box-shadow style of inset 7px 2px 10px #babebc, inset -5px -5px 12px #fff. The overlay panel that switches between the panels is given a background color of #ff4b2b. The cursor style for the buttons is set as pointer to get the hand cursor effect on hover and a text transform style as uppercase to automatically convert the characters of the text to uppercase. Source: https://codepen.io/Shruti-Ag/pen/YzywyKb

This is another sign in/ sign up form with a flipping animation, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The flipping function takes place upon clicking on the 'Sign in' and 'Signup' buttons, which is implemented using JavaScript methods. The font style has been imported to the code with its URL. The background color of the form is set as #444. The input text fields are given a background color as #DDD and a border style as 1.5px solid #DDD. The fields take a border effect as 1.5px solid black, in a hover event. The 'Sign in' button is given the styles of cursor style as pointer to get the hand cursor effect on hover, width as 140px, font color as whitesmoke, background color as #DDD, font-family as 'Raleway', and text-transform as uppercase to automatically convert the characters into uppercase. The button takes the background color of #222, and font color of whitesmoke, in a hover event. The flipping animation of the form is created by giving it's a transform effect of rotateY(180deg). Source: https://codepen.io/hanumaukkadapu/pen/eaOJEw

This is another example of a stylish sign in/ sign up form, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The JavaScript methods have been used to create dynamic HTML content. The background image and the font styles have been imported to the code with their URLs. The body of the form is given the background color of #E3E3E3. The users are given the ability to switch between the sign up/ and sign in panels. The title of the panels is displayed with the styles of font-family: 'Noto Serif', serif, font-size as 26px, and letter-spacing as 1px. The social media icons are given a border style as 1px solid #dd8d38, and font color as #dd8d38. In a hover event, the icons take the background color of #dd8d38 and the font color as white. The sign in and signup forms are given a box-shadow style as 0px 0px 38px 22px rgba(0,0,0,0.14). The 'Sign in' button is given a background color as #dd8d38, which gets changed to white in a hover event. The input text fields also take a border style of #dd8d38, on hover. Source: https://codepen.io/Darjan_Gardinovacki/pen/gNYEqe

This is an example of a sliding signup/ sign-in form, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The form consists of two panels; one for signup and the other one for sign-in. The users are given the ability to switch between the panels by clicking on the button. The JavaScript methods have been used to implement the sliding functionality of the panels. The font style is imported to the code with its URL. The body of the form is given the styles of font-family as 'Teko', sans-serif, background color as #86235a, and align-items as center. The information container is given a box-shadow style as 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22). The panel content is displayed with the styles of font-size as 18px, font-weight as 100, line-height as 20px, and letter-spacing as 0.5px. The 'Sign in' button is displayed with a style set of border as 1px solid #f3f3f3, background color as #23bebe, font color as #fff, font-size as 12px, font-weight as bold, and text-transform as uppercase to automatically convert the text to uppercase. Source: https://codepen.io/zaidik/pen/wvMapoM

This is an example of a sign in/ registration form, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The form consists of a login panel and a sign-in panel in a single form. The font style and style sheets have been imported to the code with their URLs. The JavaScript functions have been used to implement the opening fadeout and slide down animations for the forms. The information container is given a background color as #041122, and a box-shadow style as 1px 2px 2px rgba(4, 17, 34, 0.68). The image logo is given an opacity value of 0.4, width as 80px, and cursor style as pointer to get the hand cursor effect on hover. The logo increases its opacity to 1 and takes a transform effect of rotate(360deg) scale(1.2, 1.2) on hover. The panel titles are displayed with a font-size of 12px, and a background color as #041122, which gets changed to #01AEF2, in the focus mode. The opacity of the titles also gets changed to 0.6 on hover. The input text fields also take the background color of #285c7a, on hover. The 'Submit' button takes a transform effect as scale (0.8, 0.8), in a hover event Source: https://codepen.io/mohamed-hany22/pen/gLZQeo

This is an example of a sliding signup and sign in form, designed using CSS, HTML, and Bootstrap framework 4. The form consists of two panels; one for signup and the other one for sign in. The users are given the ability to switch between the panels by clicking on the button. The background color of the form is set as #092525. The information container is given a box-shadow style as 0 15px 30px rgba(0, 0, 0, 0.2), 0 10px 10px rgba(0, 0, 0, 0.2), and a background color as linear-gradient(to bottom, #efefef, #ccc). The overlay panel is given a background color as linear-gradient(to bottom right, #7FD625, #009345). The overlay container takes a transform style of translateX(-20%) when it's on left side and translateX(0), when it's on right side. The input text fields are given a background color as #eee, border bottom style as 1px solid #ddd, and a box-shadow style as inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 -1px 1px #fff, 0 1px 0 #fff. The buttons are given a text-transform style as uppercase to automatically convert the text to uppercase, and takes a transform style of scale(0.9), in a focus event. Source: https://codepen.io/webnoobcodes/pen/qBWbwoJ