This is a template of a web form with a shopping card with an Add to Card button on hover, designed using HTML, CSS, and JavaScript. JavaScript functions have been used to implement hover effects. The icons, images, and fonts are imported to the form with their URLs. The image card is given the styles of font-family as 'Raleway', Arial, sans-serif, position as relative, overflow as hidden, margin as 10px, min-width as 220px, max-width as 310px, width as 100%, color as #333333, text-align as center, background-color as #ffffff, and line-height as 1.6em. The image has the styles of vertical-align as top, max-width as 100%, and opacity as 0.35s. The background color of icons is set to #000000 and the color is set as #ffffff. The text-transform style of icons is set as uppercase to automatically convert the text to uppercase. In a hover event, the button and icons take a transform style of translateY(100%) where the opacity of the image becomes 0.8.

This is a template of a web form with a product card with a rotate button on hover, designed using JavaScript, HTML, and CSS. JavaScript functions have been used to implement the hover effects. The icons, images and fonts are imported to the form with their URLs. The image card is given the styles of font-family: 'Raleway', Arial, sans-serif, position: relative, overflow: hidden, margin: 10px,min-width: 230px, max-width: 315px, width: 100%, background: #ffffff, text-align: left, color: #000000, box-shadow: 0 0 5px rgba(0, 0, 0, 0.15), font-size: 16px, and transform: translateZ(0). The image has the styles of vertical-align as top, max-width as 100%, and position as relative. The initial price is given an opacity value of 0.5 and a font-size of 0.9em whereas the discounted price is given the font-size 1.5em. The text-transform style of uppercase is given to the Add to Card icon along with the background color #409ad5. In a hover event, the icon takes a transform of rotateX(-90deg)

This is a template of a web form with a shopping card with a header icon, designed using CSS, HTML, and JavaScript whereas JavaScript functions have been used to implement the hover effects. The icons, images, and fonts are imported to the form with their URLs. The image card is given the styles of font-family as 'Oswald', Arial, sans-serif, position as relative, margin as 10px, min-width as 230px, max-width as 315px, width as 100%, background as #ffffff, text-align as center, color as #000000, box-shadow as 0 0 5px rgba(0, 0, 0, 0.15), and font-size as 16px. The image has the styles of max-width as 100%, vertical-align as top, position as relative, background-color as #666666, and padding-top as 40px. The name title is given a font size of 1.3em, font-weight of 400, margin-bottom of 5px, and text-transform of uppercase. The icon is given a background color of #666666 which changes to #2980b9, in a hover event.

This is a template of a badge style CSS based logo with a banner, designed using CSS, and HTML. The fonts are imported to the form with their URLs. The styles for the class is set as font-family as 'Raleway', Arial, sans-serif, position as relative, color as #bdbdbd, margin as 60px 25px, max-width as 285px, width as 100%, text-align as center, font-size as 16px, and box-sizing as content-box. The text-transform style for the name title and subtitle is set as uppercase to automatically transform the text to uppercase. The title of the badge is given the styles of font-family as 'Lora', Arial, sans-serif, font-weight as 700, font-size as 1.8em, line-height as 50px, position as relative, background-color as #bdbdbd, color as #212121, text-align as center, margin as 0 30px 8px, border-top as 6px solid #212121, and border-bottom as 6px solid #212121. The font size for the subtitle is set as 0.6em and font-weight as 500.

This is a template of a CSS based retro logo, designed using CSS, and HTML. The fonts are imported to the form with their URLs. The styles for the class is set as font-family: 'Raleway', Arial, sans-serif, position: relative, display: inline-block, color: #bdbdbd, margin: 60px 20px, max-width: 285px, width: 100%, text-align: center, font-size: 16px, and box-sizing: content-box. The text-transform style all the text is set as uppercase to automatically convert the text to uppercase. The header one is given the styles font-family: 'Teko', Arial, sans-serif, font-weight: 700, font-size: 54px, text-align: center, and line-height: 27px whereas the header two given the styles of background-color: #bdbdbd, color: #212121, display: inline-block, font-size: 0.6em, font-weight: 700, line-height: 18px, padding: 0 20px, and position: relative. The icon below the header is also given the styles of font-size as 22px and line-height of 36px.

This is another example of a card layout web form with a testimonial card with a profile image, and a quote, designed using HTML, and CSS. The fonts and images are imported to the form with their URLs. The testimonial card has a styles set of font-family as 'Playfair Display', Arial, sans-serif, position as relative, overflow as hidden, margin as 10px, min-width as 230px, max-width as 315px, max-height as 220px, width as 100%, color as #000000, text-align as left, font-size as 16px, and background-color as #000000. The image has the styles of max-width as 100%, opacity as 0.5, and blackface-visibility as hidden. The quote is given a font-size of 0.9em and a font-style of Italic whereas the name title is given the styles margin as 10px 0, line-height as 1.1em, font-weight as 900, and color as #1a1a1a. The profile pic is given a border-radius of 50% to make it a circle.

This is an example of a card layout web form with a testimonial card with image, title, and a quote, designed using HTML, and CSS. The fonts and images are imported to the form with their URLs. The testimonial card is given the styles of font-family as 'Roboto', Arial, sans-serif, position as relative, overflow as hidden, margin as 10px, min-width as 230px, max-width as 315px, width as 100%, color as #141414, text-align as left, line-height as 1.4em, background-color as #e6e6e6, and padding-top as 88px. The image has the styles of vertical-align as top, max-width as 100%, and opacity as 0.85. The quote is given a font-style of Italic, color of #212121, line-height as 1em, font- family of 'FontAwesome', and a font-size of 180px. The name title is given a font-size of 1.3em, margin of 25px, font-weight of 300, whereas the subtitle is given a font-color of #bdc3c7, and a font-size 0.65em.

This is an example of a card layout web form with a testimonial card with icon, quote and title, designed using HTML, and CSS. The fonts and images are imported to the form with their URLs. The testimonial card is given the styles of box-shadow as 0 0 5px rgba(0, 0, 0, 0.15), color as #9e9e9e, display as inline-block, font-family as 'Roboto', Arial, sans-serif, font-size as 16px, margin as 35px 10px 10px, max-width as 310px, min-width as 250px, position as relative, text-align as center, width as 100%, background-color as #ffffff, border-radius as 5px, and border-top as 5px solid #d2652d. The body of the form is given the color of #212121 and text is aligned to center. The quote is given a font-style of Italic and the name title is given the styles color as #3c3c3c, font-size as 20px, font-weight as 300, line-height as 24px, margin as 10px 0 5px whereas the subtitle is given a font-weight of 400 and opacity of 0.5.