This is an example of a hotel booing modal, designed using HTML, CSS, and Bootstrap framework 4. The images are imported to the code with their URLs. The form consists of a modal button, which expands to the hotel booking form upon clicking on it. The body of the form is given a background color as #eee. 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 dropdown menu, in an orderly manner. The price of a room is displayed using a highlighted font. The no of days is given a font color as green. The date is given the styles of line-height as 17px, and margin-bottom as 8px. The 'Complete booking;' button is created as a danger type button. Most of the form text is displayed using a font-size of 12px.
This is an example of a modal Contact Us form with floating labels, designed using CSS, HTML, and Bootstrap framework 4. The font style is imported to the code using its URL. The body of the form has the styles of background color as linear-gradient(0deg, #fff, 50%, RGB(210, 231, 252)), and font-family as 'Rubik', sans-serif. The font –size of the title is calculated using the calc(14px + (17 - 14) * ((100vw - 360px) / (1600 - 320))) formula. The cursor style for the modal is set as pointer to get the hand cursor effect on a hover event and the background color is set as #52B4DB. The input text fields are given a font-size of 15px, and opacity as 0.5. In a focus event, the font-size of the labels gets changed to 8px, and the font color gets changed to #04A79C, to create the effect of the floating label. In a focus event, the fields take the effects of border as 1px solid #04A79C, and box-shadow as 2px 2px rgba(233, 226, 226, 0.8).
This is an example of a Contact Us form with a modal feature, designed using CSS, HTML, and Bootstrap framework 4. The font style and the background image is imported to the code with the URLs. The Contact Us form is created to be expanded by clicking on the modal button. The body of the form is given a background color of #eee, and a font-family style of 'Merriweather', serif. The text on the modal button is displayed with the styles of font-weight as 100, and font-size as 30p. The 'Send' button is given a background color of #000. The input text fields are given a border-bottom style of 1.5px solid #dae0e5, whereas the input text is displayed with the styles of opacity as 0.5, letter-spacing as 1px, and font-size as 90%. In a focus event, the text on input fields, change their styles to font color as #000, border-color as #fff, border-bottom as 1.5px solid #000, opacity as 1, and letter-spacing as 1px.
This is an example of a modal that expands to a rating form with rating emoji's, designed using HTML, CSS, and Bootstrap framework 4. The emojis are imported to the code as images with their URLs and created as radio type buttons. The body of the form is given a font style of 300 18px/1.5 'Rubik', sans-serif, and background color as #BA68C8. The rating card is given a transition value as background 0.4s ease-out. The cursor style for the rating card is set as pointer to the get the hand cursor effect in a hover event and an animation style of levitate 1s ease-in-out infinite is also given to apply the levitating effect to the emojis. The emojis are also given a transform effect of scale(1.8), to be effective on a hover event. The responsiveness and the mobile-friendliness of the form have been increased with the use of media quarries.