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 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.
This is another example of a profile card layout with title, position, text, and icons, designed using CSS, HTML, and JavaScript. The fonts, icons, and images are imported to the form with their URLs. JavaScript functions have been used to implement the mouse hover effects. The image card is given the styles of font-family as 'Lato', Arial, sans-serif, position as relative, display as inline-block, overflow as hidden, margin as 10px, min-width as 250px, max-width as 310px, width as 100%, background-color as #ffffff, color as #2B2B2B, text-align as center, font-size as 16px, and box-shadow as 0 0 5px rgba(0, 0, 0, 0.15). The image has the styles of vertical-align as top, max-width as 100%, position as relative and border-radius as 50% to make it round shaped. The title has been given a font family of 'Oswald', text-transform as uppercase, font-size as 20px, font-weight as 400, line-height as 24px, and margin as 3px 0 whereas position is given the color #888 and letter-spacing of 1px. The icons are given a style set of font-size as 1.5em and color of #999 which changes to #555 in a hover event.
This is an example of a web form with a set icons with a page turn effect on hover, designed using CSS, HTML, and JavaScript. The fonts and icons are imported to the form with their URLs. JavaScript functions have been used to implement the mouse hover effects. The icons are given the styles of box-sizing: border-box, perspective: 50em, transition: all 0.4s ease, background-color: #7e1946, border-radius: 5px, border: 1px solid rgba(255, 255, 255, 0.1), box-sizing: 0 0 5px rgba(0, 0, 0, 0.5), color: #e6e6e6, display: inline-block, font-size: 40px,height: 75px, line-height: 75px, margin: 40px, position: relative, text-align: center, and width: 75px. The icons are given a border radius of 5px 0 0 5px. The icons are primarily given two background colors; #69153a and #7e1946 which change into #1d5599 and #2468bb, in a hover event with a transform style of transform: rotateY(180deg).
This is another example of a card layout with images that have a slide down icon appearing on them as a hover effect, designed using CSS, HTML, and JavaScript. The fonts and images are imported to the form with their URLs. JavaScript functions have been used to implement the mouse hover effects. The image card is given the styles of position as relative, display as inline-block, overflow as hidden, margin as 10px,min-width as 230px, max-width as 315px, width as 100%, color as #ffffff, font-size as 16px, and transform as translateZ(0). %. The image has the styles of vertical-align as top, max-width as 100%, and backface-visibility as hidden. In a hover event, a card with the icon and background color of #009ab6, opacity of 1, appears in front of the image card with a transforming effect of translateX(0).
This is an example of a profile card layout with images, icons, and speech bubble details, designed using HTML, CSS, and JavaScript. The fonts, icons, and images are imported to the form with their URLs. JavaScript functions have been used to implement the mouse hover effects. The image card is given the styles of font-family as 'Open Sans', Arial, sans-serif, position as relative, display as inline-block, 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, and font-size as 14px. The image has been given the styles of border-radius as 5px, max-width as 100%, height as 80px, vertical-align as top, and float as left. The background color of the body is set to #212121. The name is given a font-weight of 600, font-size of 1.2 em, and font-family as 'Montserrat', Arial, sans-serif whereas the designation is given the styles of color as #8c8c8c, font-weight as 400, and letter-spacing as 2px. The quote has the styles of font size as 0.9em, letter-spacing as 1px, and opacity as 0.9. In a hover event, the social media icons will change its opacity from 0.75 to 1 in a transition effect of all 0.35s ease.