Material Design Lite card demo

Developer
Envato Tuts+
Size
2,045 Kb
Views
58,696
  1. Material Design Lite card demo Previews
  2. Material Design Lite card demo HTML Codes
  3. Material Design Lite card demo CSS Codes

How do I make an material design lite card demo?

From An Overview of Material Design Lite on Tuts+. What is a material design lite card demo? How do you make a material design lite card demo? This script and codes were developed by Envato Tuts+ on 28 July 2022, Thursday.

Material Design Lite card demo Previews
IQ Test

Material Design Lite card demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Design Lite card demo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <head> <!-- Material Design Lite --> <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script> <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css"> <!-- Material Design icon font --> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <!-- Wide card with share menu button --> <div class="mdl-card mdl-shadow--2dp demo-card-wide"> <div class="mdl-card__title"> <h2 class="mdl-card__title-text">Welcome</h2> </div> <div class="mdl-card__supporting-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia... </div> <div class="mdl-card__actions mdl-card--border"> <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> Get Started </a> </div> <div class="mdl-card__menu"> <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"> <i class="material-icons">share</i> </button> </div> </div> </body>
</html>
</body>
</html>

Material Design Lite card demo - Script Codes CSS Codes

 .demo-card-wide.mdl-card { width: 512px; margin: 0 auto; } .demo-card-wide > .mdl-card__title { color: #fff; height: 176px; background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/welcome_card_tuts.png') center / cover; } .demo-card-wide > .mdl-card__menu { color: #fff; } body { padding: 20px 0 0; background: #fafafa; position: relative; }
Material Design Lite card demo - Script Codes
Material Design Lite card demo - Script Codes
Home Page Home
Developer Envato Tuts+
Username tutsplus
Uploaded July 28, 2022
Rating 3.5
Size 2,045 Kb
Views 58,696
Do you need developer help for Material Design Lite card demo?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Envato Tuts+ (tutsplus) Script Codes
Name
Material Design Lite grid demo
How to Build an Off-Canvas Navigation With CSS Grid
How to Animate a Coffee Drinking Sprite With ScrollMagic
Building a Horizontal Timeline With CSS and JavaScript
Building Responsive Forms With Flexbox
Remix CodePen Challenge
Adding Appeal to Your Animations on the Web
Material Design Lite buttons demo
CSS Tooltip Magic
Material Design Lite topbar demo
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!