This is an example of a login/signup form with dropdown input and social media buttons. The icons and font styles are imported to the code with their URLs. The form consists of a signup button, on which by clicking on, the users will be redirected to another form where the country can be selected from a dropdown list, and social media icons can be used to sign in. The body of the form is given the styles of min-height as 81vh, background as linear-gradient(0deg, #fff, 50%, #DEEEFE), and font-family as 'Rubik', sans-serif. The card is given the styles of width as calc(480px + 10 * ((100vw - 320px) / 680)), and box-shadow as 0px 5px 10px rgba(0, 0, 0, 0.8). The sign in button is given the styles of font-size as calc(12px + (13 - 12) * ((100vw - 360px) / (1600 - 320))), padding as calc(6px + 5 * ((100vw - 320px) / 780)), and color as #000. The sign in button takes the color of #315189, in a hover event. Source: https://bbbootstrap.com/snippets/login-signup-form-dropdown-input-and-social-buttons-35175582
This is an example of a simple header dropdown menu, designed using HTML, JavaScript, CSS, and Bootstrap framework 4. The fonts and Bootstrap styles are imported to the code with their URLs. JavaScript functions have been used to implement the toggle functions of the header. 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 child elements of the header, in an orderly manner. The font family style for the header is set as Poppins, sans-serif. The header is given a background color of #ffc107, which changes to #ffd761, in a hover event. The header child elements are given a font color as #292929, padding as15px, and display as block. A cursor style for the elements is set as pointer to get the hand cursor effect in a hover event. Media quarries have been used to increase the responsiveness of the form. Source: https://www.tolmatol.com/css-snippets-drop-down-menu-with-jquery-responsive/
This is an example of a custom dropdown menu with hover effects, designed using HTML, CSS, JavaScript and Bootstrap framework 4. The fonts and icons are imported to the code with their URLs. 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 menu items in an orderly manner. The JavaScript functions have been used to implement the expanding functions of the menu button. The body of the form is given the styles of font-family as 'Raleway', sans-serif, background as linear-gradient(to bottom,#f9fbf7, #C9D8FF), height as 100%, display as table, width as 100%, and text-align as center. The dropdown menu button is given the styles of background as linear-gradient(to right,#3d6def, #8FADFE), display as inline-block, line-height as 40px, padding as 0 18px, text-align as left, border-radius as 4px, box-shadow as 0px 4px 6px 0px rgba(0,0,0,0.2), and cursor style as pointer to get the hand cursor effect in a hover event. The name of the button has the styles of font-size as 9px, and text-transform as uppercase to automatically convert the text to uppercase. The menu items take the background color of #3d6def, in a hover event. Source: https://codepen.io/veronicadev/pen/JLoaVg
This is an example of a web form with input types and pseudo-elements, designed using HTML, CSS, and Bootstrap framework 4. 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 icons and elements in an orderly manner. There are eight types of inputs and elements displayed on the form, which are text¸ radio, checkbox, range, color, button, text area, and Select. The wrapper class is given the styles of max-width as 600px, margin as 2rem auto 1rem. The header of the form is given a text-align style as center. The list items are displayed in a grid, and the number of columns for the grid is defined as 2. The grid-gap is set as 1rem, with the font-style for the list items is set as 16px/1.4 Arial, sans-serif. An outline style of 1px solid #DDD is set for the list item box, with a padding value as .5rem. Source: https://codepen.io/yoksel/pen/eYNmRNe
This snippet displays the complete example of Datatables of JS Library with pagination. This uses the Bootstrap 4 and Jquery 3.3, to create the table using a .table-fluid class which is responsible for the responsive nature of this table. Check out this table on various screen display, this would make the table display its responsive nature. The grid displays the 3 columns with sorting enabled in ascending and descending order. It has the search with the setting for the number of records to display be displayed in the grid. Notice the number of pages displayed according to the settings and number of records. This example uses the jquery.datatables.min.css file for styling but you can have your custom styling for each element.
This is an example of Nested Accordion with verticle steps inside each accordion. Here the panel is created inside the panel to create a nested view. To create this nested view we have a super accordion defined as panel-group and then the panels containing the header and body for each accordion. Now each of these panel-body defines a new panel which would create a new group of the accordion. The data-toggle is set to collapse to give a collapsible behavior to each accordion. The innermost body contains some listed information; You would rarely see, but this could be useful in website for educational to display large content or on the sites which deals with different variety yet categories under one particular menu. You can use this on your website.