Close

Profile Cards with CSS Scroll Snap

This is an example of a bootstrap web form with the image carousel feature with a scrolling option, designed using JavaScript, CSS, bootstrap framework 4 and HTML. The images and bootstrap styles are imported to the code with their URLs, whereas the carousel feature had been implemented using JavaScript. The ability to scroll the carousel with the mouse wheel is set in JavaScript. The background of the form is given a style set of background as #111, font-family as "Comfortaa", sans-serif, and min-height as 100vh. The width and height for the card image are set as 17em, and 400px, respectively. The card image is also given the styles of margin as 40px 20px, min-width as 17em, scroll-snap-align as center, background as #f8f8f8, height as 400px, and border-radius as 20px. The font color for the title is set as #ccc, with the font style set to 900 100px/1 Muli. A text-transform style as uppercase is given to automatically convert the text to uppercase. The cursor style for image card is set as pointer to get the hand cursor effect in a hover event, as well as a box-shadow style of 0 0 30px rgba(255, 255, 255, 0.2). Source: https://codepen.io/reguia/pen/rNadwEJ

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.