This is an example of a News Card layout, designed using CSS, and HTML. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display details in an orderly manner. The fonts and images are imported to the form with their URLs. The colors and fonts are declared as variables, which are $regal-blue: #034378, $san-juan: #2d4e68, $bermuda: #77d7b9, $white: #fff, $black: #000, and $open-sans: 'Open Sans'. The body of the form has the styles of background-image as linear-gradient(to right, $regal-blue, $san-juan), height as 100vh, and font-family as $open-sans. For the first example, date section has the styles of background-color: $bermuda, color: $white, font-weight: 700, font-size: 24px, and text-transform: uppercase. The title is given the color lighten($black, 50%). The menu button has the styles text-align: center¸and cursor: pointer. For the second example, the header has the styles color: $white, padding: 1em, and the date has the styles font-size: 12px. The read more button is given the styles text-align: center, font-size: 12px, color: $white, and a transform of translate(0, -50%). Source: https://codepen.io/choogoor/pen/YWBxAg/

This is an example of a Blog Cards layout, designed using CSS and HTML. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display details in an orderly manner. The images have been imported to the form with their URLs. The body is given the styles of background as #f1f1f1, and margin as 2rem. Colors have been defined as variables; which are $color_white as #fff, $color_prime as #5ad67d, $color_grey as #e2e2e2, $color_grey_dark as #a2a2a2. The blog card has the styles of background: $color_white, line-height: 1.4, font-family: sans-serif, and border-radius: 5px. The details inside the card are given the styles color: $color_white, font-size: .9rem and, text-decoration: dotted underline.The photo takes a transform of scale(1.3) rotate(3deg) and a skew effect of skew(3deg) in a hover event whereas the list inside the card and the author name takes the color $color_prime in a mouse hover effect. Source: https://codepen.io/ChynoDeluxe/pen/bdXeqQ/

This is an example of an Article News Card, designed using CSS, HTML, and JavaScript. JavaScript functions have been used to implement hover animations. The images have been imported to the form with their URLs. The body of the form is given a style set of background as darken(@white, 5%), font-family as 'proxima-nova-soft', sans-serif, and font-size as 14px. The month section of the thumbnail is given the styles font-size as 12px, background as @accent, and text-transform as uppercase. The title is given the styles color: @dark_gray, font-size: 26px, and font-weight: 700 whereas the subtitle is given the styles color: @accent, font-size: 20px, and font-weight: 400. The description has the styles color: @gray, font-size: 14px, and line-height: 1.8em. In a hover event, the description section takes the styles display: block, height: auto, and opacity: 1. Source: https://codepen.io/andytran/pen/BNjymy/

This is a template of a web form with a product card with animations, designed using HTML, CSS, and JavaScript. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the details in an orderly manner. The pictures imported to the form with their URLs. JavaScript hover(function(), click(function(), each(function() are used to implement carousel, flipping, load images animations. The form is given a background color of #eaebec and a font family of "Open Sans", sans-serif. The product card is given a transform-style of preserve-3d to add a 3D-space effect. It is also given a transform of rotateY( 180deg ) for the flipping animation. The view details button is given the styles border as 2px solid #fff, color as #fff, font size as 19px, text-align as center, text-transform as uppercase, and font-weight as 700 whereas it takes the color #48cfad and cursor takes the pointer effect in a mouse hover. The product card takes the color #34c29e in a mouse hover event. Source: https://codepen.io/virgilpana/pen/RNYQwB/

This is an example of a web form with parallax depth cards layout, designed using CSS, HTML and JavaScript. JavaScript functions have been used to implement the card warping animations based on mouse movement, in a hover event. The body of the form is given the styles of margin as 40px 0, font family as "Raleway", font size as 14px, font weight as 500, and background color as #BCAAA4. The title is given the styles of the same font family, font size as 24px, font weight as 700, color as #5D4037, and text align as center. The card is given the styles of position as relative, flex as 0 0 240px, width as 240px, height as 320px, background color as #333, overflow as hidden, border radius as 10px, and box shadow as rgba(black, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px, inset rgba(white, 0.5) 0 0 0 6px. Cursor is set as pointer to get the hand cursor effect on cards. Parallax depth effect has been achieved by using $hoverEasing, and $returnEasing variables. Source: https://codepen.io/andymerskin/pen/XNMWvQ/

This is a template of a Google Now inspired flip card layout, designed using HTML, CSS, and JavaScript. The Li element of lists has been used to display the details in a list whereas JavaScript functions have been used to implement the flipping animations. Variables are used to define values to avoid using values again and again in different places such as colors. The predefined colors are $color1: #5271C2, $color2: #35a541, $color3: #bdb235, $color4: #db6623, $color5: #3e5eb3, and $color6: #aa9e5c. The body of the form is given the styles of min-height as 100vh, background as lighten(black, 12), color as white, font family as 'Lato', and text rendering as optimizeLegibility. The card is given the styles float as left, width as calc(100% * .3333 - 30px + .3333 * 30px), height as 340px, margin as 0 30px 30px 0, and perspective as 1000. For the flipper, the cursor is set to pointer to display the hand cursor, transform style is set to preserve-3d and back face visibility is set as hidden. In a flipping event, the card takes a transformation of rotateY(180deg) scale(1.1) and changes the background to lighten(black, 8). Source: https://codepen.io/ettrics/pen/zxMPWj/