This is another example of a card layout with a bordered image with various text in it and a hover effect, designed using HTML, CSS, and JavaScript. The fonts are imported to the form with its URL and JavaScript functions have been used to implement the mouse hover effects. The card is given the styles of font-family as 'Open Sans', Arial, sans-serif, margin as 10px, min-width as 230px, max-width as 315px, width as 100%, color as #ffffff, text-align as center, font-size as 14px, position as relative, padding as 10px, border as 2px solid #e8b563, and box-sizing as border-box. The image has the styles of vertical-align as top, max-width as 100%, and background color as linear-gradient (#000000, #ffffff). The text-transform style for all the titles is set as uppercase to automatically transform the text to uppercase. The header two is given the styles; top as 50%, transform as translateY(-50%), font-size as 2em, and font-family as 'Playfair Display', Arial, sans-serif and half of it is given the color #e8b563. The bottom link is given the styles of font-size: 1.3em, font-weight: 700, and letter-spacing: 2px whereas the styles for the name title is set as font-size: 1.2em, letter-spacing: 1px, font-weight: 400, opacity: 0.9, and font-family: 'Playfair Display', Arial, sans-serif.