This is a template of a sign-in web form designed using HTML, and CSS. The bootstrap styles, icons, fonts, and images are imported to the form with their URLs. The form is given a font-family of 'Numans', sans-serif whereas the card has the styles of height as 370px, margin-top as auto, margin-bottom as auto; width as 400px, and background-color as rgba(0,0,0,0.5) !important. The social media icons are given the styles of font-size as 60px, margin-left as 10px, and color as #FFC312. In a hover event, the color of social media icons becomes white and the cursor becomes pointer to get the hand cursor effect. The login button has an initial style set of color as black, background-color as #FFC312, and width as 100px which also turns into the background color white, in a hover event. The links are given a margin-left style of 4px and the color white.
This is another example of a login page designed with HTML and CSS. The input type ‘text' has been used for the text fields. A max length has been set on each text field, username as 35 and password as 30. This allows the user to enter characters up to a given number of max length; in this case user name-35 and password-30. CSS styles has been used to get a shady combination of colors with its values set as height to 100%, width to 100%, margin to 0, background to #f2306a and the background as linear-gradient (left, #f2306a 0%, #6d00a0 100%) to apply the shade of two colors. The input elements have the styles of position as absolute, height as 35px, with as 90%, padding as 0 5%, background as #050023, color as white, font size as 15px, font-weight as bold, border-radius as 4px and border as 2px solid #ff0067.
Source : https://codepen.io/michelebit/pen/NEXbOj
This is a form where users can either log in through regular user name and password or via social media accounts. The media queries have been used to implement the responsive styles to the HTML based on the screen of the user. The button hovers effects are added to the HTML by the use of the hover class in CSS styles and adding the background color on the mouse hover. The style element focus has been used to apply the styles based on the clicked element. The background colors have been set by the use of the CSS style background. Google font has been imported by adding its URL and the @import class in CSS to display text. On a mouse hover event, the href style will be set to opacity - 0.8, color - #ff5400 and text-decoration – none
This is a snippet of different Login styles, which can be used for a website or portal. The first style is a simple Sign In form with Email and Password as login details. It also displays the link for retrieving a forgotten password and a checkbox for saving password. Two buttons Sign up and log in as displayed. Second login form displays the buttons linked with the login of Twitter and Facebook. The third style displays an icon with input text and some message. The snippet uses Bootstrap 4 and jquery 3.2. All these login forms are placed in card-body. The FormControl and FormGroup elements are used. These forms can be used in an ecommerce website, market place, and booking websites. Entire card is placed in tag of HTML5. It defines some content aside from the content it is placed in. It could also be placed as a sidebar in an article.