This is an example of a responsive email template with a basic customer receipt designed with HTML, CSS, and Bootstrap framework 4. An external CSS style sheet has been imported to the HTML code. The images and fonts are also imported to the code whereas the media queries have been used to increase the responsiveness of the form. The form is given a background color of #f5dbce. The receipt information is given a font color of #718096, whereas the customer information is given the styles of font-weight as 600; text-align as right; width as 50% and align as right. The styles for the information display form is set as background-color as #edf2f7, height as 2px, line-height as 2px, and font-size as 14px. The check-in and check-out lines are given the styles of color as #a0aec0; font-size as 10px, text-transform as uppercase to automatically convert to uppercase, and letter-spacing as 1px, whereas the date information lines have the styles of font-weight as 600, and color as #000000. The total value has the styles of font color as #68d391 and font-size as 20px.
This is an example of a simple bootstrap login form, designed using HTML, CSS, and Bootstrap framework 4. The images are imported to the code with their URLs. The body is given the styles of background as rgba(241, 242, 246,1.0), and font-family as sans-serif. The signup section is given a style set of width as 1100px, and height as 500px, background as white, and box-shadow as 0px 0px 30px 20px rgba(0,0,0,.12). The color of the card header is set as color: rgba(164, 176, 190,1.0). The icon at the top is given the styles of height as 75px, width as 75px, line-height as 75px, border as 2px solid red, and border-radius as 50% to get the circle shape. The input field has the styles of width as 85%, padding-left as 20px, color as rgba(47, 53, 66,1.0), and font-size as 20px, whereas the Enter button is given the styles of height as 40px, width as 230px, border-radius as 75px, margin as 20px auto, background as rgba(255, 107, 129,1.0), and font color as white.
This is an example of a ticket cards layout form with hover effects, designed using CSS, HTML, and Bootstrap framework 4. The images 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 cards in an orderly manner, whereas the media queries are used to increase the responsiveness of the form. The colors are predefined as $blue: #0a4870, $blue2 : #e3ebf1, $black: #000, $grey : #7d7d7d, $grey2 : #f0f0f0, $grey3 : #e8e7e7, $grey4 : #fdfdfd, $bluegrey : #49606e, and $orange: #ec992c. The form is given a font family as 'Sofia', sans-serif. The card title is given the styles of color as #0a4870, and font-weight as 500. The ticket card is given a background color as $blue, and a transition as .3s. The Reserve button is given the styles of text-transform as uppercase to convert the text to uppercase, font-weight as bold, font-size as 1.3em, color as white, and cursor as pointer to get the hand cursor effect, which takes the styles of background as white, border as 0px solid white, and color as $blue, in a hover event.