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 an animated login page, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The font style, CSS, and Bootstrap packages have been imported with their URLs. The form is set to switch between the login page and the register page. JavaScript methods have been used to implement the switching animation of the login and register forms. The body of the form is given a font family style as 'Mukta', sans-serif. The white panel is given the styles of background-color as rgba(255,255, 255, 1), height as 500px, transition as .3s ease-in-out, and box-shadow as 0 0 15px 9px #00000096. The registration and login panels are given a height as 400px, and background-color as rgba(236, 48, 20, 0.9). The 'Register' and 'Login' buttons in the white panel are displayed with the styles of background color as #444444, font color as #f9f9f9, text-transform as uppercase to automatically convert the text to uppercase, and cursor style as pointer to get the hand cursor effect on hover. Source: https://bootsnipp.com/snippets/92gmX
This is an example of a testimonial card format with a flipping animation, designed using CSS, HTML, and Bootstrap framework 4. The user images are imported to the code with their URLs. The card is given an animation to flip between the user information on the front side and testimonial on the backside, on hover. The background color of the form is set as #f7f6f6. The front and back sides of the cards are given the styles separately. The cards are given the styles of width and height as 100%, cursor as pointer to get the hand cursor effect in a hover event, background color as #D50000, font color as #fff, border-radius as 10px to get the rounded corners, transform as rotateY(180deg), border as 1px solid #eee, and box-shadow as 5px 6px 6px 2px #e9ecef. The user name is displayed with a font color of #eee, and a font-size of 10px. The cards are given a transform effect as rotateY(180deg), to get the flipping animation on hover. Source:https://bbbootstrap.com/snippets/bootstrap-client-testimonials-3d-flip-animation-49579340
This is an example of a navbar layout with dropdown options, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The font styles are imported to the code with their URLs. JavaScript methods have been used to implement the functionality of the dropdown lists. 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 navbar items, in an orderly manner. The body of the form is given the styles of font-family as 'Open Sans', sans-serif, font-size as 1.6rem, and font-weight as 400. The form title is displayed with a font-size of 3.6rem, whereas the description is displayed with a font-size of 1.6rem. The button is created as a primary type button and given a background color of #c0ca33, which gets changed to #c0ca33, on hover. The dropdown items are set to take a font color of #c0ca33, in a hover event. Media quarries have been used to increase the responsiveness of the form. Source: https://www.bootdey.com/snippets/view/bs4-navbar-with-dropdown-animations#js
This is an example of a registration form with an animated background, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The form consists of an animated background and a registration section with input text fields and a 'Submit' button. Particles.js JavaScript library has been imported to the code and JavaScript methods have been used to implement the animations in the background form. The body of the form is given the styles of height and width as 100%, font-family as 'Roboto', sans-serif, and font color as #fff. The background of the form is given a linear gradient color of linear-gradient(to right, #6819e8 0%,#7437d0 35%,#615fde 68%,#6980f2 100%). The title of the form is displayed with a font-size of 59px. The input text fields have been validated by making them required. The 'Submit' button is created as a primary type button in HTML. Source: https://www.bootdey.com/snippets/view/Register-form-with-particles-js#js
This is an example of a web layout with movable profile avatars and hover effects, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The avatars are given an animation to move along with the mouse cursor movement, on hover. The profile images are imported to the code with their URLs. JavaScript methods have been used to implement the movable animation and the resize effect on the avatars. The body of the form is given a background color as #08202B. The navbar is given a style set of font-family as 'GTAmericaExpanded', sans-serif, font-size as 2.4rem, font color as #fff, font-weight as 900, text-transform as uppercase to automatically convert the text to uppercase, cursor style as pointer to get the hand cursor effect on hover, and line-height as 1.2em. The avatar name is given the styles of font-size as 1.2rem, font color as #fff, font-weight as 800, and transform as translateY(-50%). The name changes its font-size to 1.7rem, on hover. The avatar photo container is given a width and a height of 50%, and 60% respectively, which gets changed to 65% and 75% in a hover event. Source: https://mdbootstrap.com/snippets/jquery/tomekmakowski/854141#js-tab-view