Our Services Layout
This is another example of an Our Services card layout with hover effects, designed using HTML, CSS, and Bootstrap framework 4. The fonts are imported to the code with its URL. The section title is given the styles of padding-bottom as 25px, text-transform as uppercase to automatically convert the text to uppercase, font-weight as 600, and font-size as 30px.The service section content has the styles of max-width as 450px, font-size as 16px, and line-height as 30px. Each service section is given an overlay section which has the styles of visibility as hidden, opacity as 0, background as linear-gradient(to right, #2196F3 0%, #64B5F6 100%), box shadow as rgba(0, 0, 0, 0.10) 0px 15px 45px 0px, transform as translateY(20px), and transition as .4s. In a hover event, the overlay section changes its opacity to 1 and gets a transform effect of translateY(10px), and gets displayed over the service section.