This is an example of a card layout with team profile details, designed using HTML, CSS, and Bootstrap framework 4. The images, fonts, CSS and Bootstrap styles are imported to the code with their URLs. The profile image is given the styles of width as 100%, transform as scale(1, 1), and transition as .5s. The images take a transform effect of scale(1.1, 1.1), to change the scale of the image, in a hover event. The name of the user profile is given a style set of font-size as 18px, text-transform as uppercase to automatically convert each letter of the word to uppercase, font-weight as 700, color as #333333, and transition as .5s. The designation text is given the styles of text-transform as uppercase, font-size as 14px, and font color as #797e82. In a hover event, the background color of the text section turns to #6f0ac8, whereas the font color of the text turns to #fff. The social media icons are given a background color as #6f0ac8, with the opacity set as 0, and the visibility set as hidden to hide when not active. In a hover event on the image, the opacity of the social media icons becomes 1 and the visibility turns to visible.
This is an example of a card layout that displays the team profile, designed using HTML, CSS, and Bootstrap framework 4. The fonts, CSS and Bootstrap styles, images, and icons are imported to the code with their URLs. The form is given the styles of background-color as #ffffff, text-align as center, box-shadow as 5.5px 9.526px 43px 0px rgba( 98, 143, 144, .15 ), border-radius as 10px, padding as 40px 0 35px 0, and margin-bottom as 30px. The team member image is given a border-radius as 100% and a width as 100% to get the circle shape. The profile name is given a font-size of 22px, whereas the designation is given the styles of font-size as 14px, color as #fb5c71, text-transform as uppercase to automatically convert all the letters to uppercase. The Facebook, Instagram, and Twitter icons are givene different background colors such as #3973e8, #f74d91, and #29bfe8.