Material Design Lite components demo
How do I make an material design lite components demo?
What is a material design lite components demo? How do you make a material design lite components demo? This script and codes were developed by David Bellotti on 30 October 2022, Sunday.
Material Design Lite components demo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Design Lite components demo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <head> <!-- Material Design Lite --> <script src="https://code.getmdl.io/1.3.0/material.min.js"></script> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <!-- Material Design icon font --> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <!-- Uses a header that contracts as the page scrolls down. --> <div class="demo-layout-waterfall mdl-layout mdl-js-layout"> <header class="mdl-layout__header mdl-layout__header--waterfall"> <!-- Top row, always visible --> <div class="mdl-layout__header-row"> <!-- Title --> <span class="mdl-layout-title">Title</span> <div class="mdl-layout-spacer"></div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right"> <label class="mdl-button mdl-js-button mdl-button--icon" for="waterfall-exp"> <i class="material-icons">search</i> </label> <div class="mdl-textfield__expandable-holder"> <input class="mdl-textfield__input" type="text" name="sample" id="waterfall-exp"> </div> </div> </div> <!-- Bottom row, not visible on scroll --> <div class="mdl-layout__header-row"> <div class="mdl-layout-spacer"></div> <!-- Navigation --> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> </nav> </div> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout-title">Title</span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> </nav> </div> <main class="mdl-layout__content"> <div class="page-content"><!-- Your content goes here --></div> </main> </div> </body>
</html>
</body>
</html>
Material Design Lite components demo - Script Codes CSS Codes
.demo-layout-waterfall .mdl-layout__header-row .mdl-navigation__link:last-of-type { padding-right: 0;
}
.mdl-layout__header {background-color: red;}
Developer | David Bellotti |
Username | dbellotti |
Uploaded | October 30, 2022 |
Rating | 3 |
Size | 2,008 Kb |
Views | 18,216 |
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!
Name | Size |
Centered Box | 1,893 Kb |
Snack time | 4,038 Kb |
Rogue NASA | 2,278 Kb |
Solar System - WIP | 3,510 Kb |
Messier 74 - WIP | 6,599 Kb |
FAB menu v2 | 4,049 Kb |
In-field top-aligned form labels | 3,648 Kb |
Pivotal Labs Animated Logo | 2,759 Kb |
Scroll Detection | 2,186 Kb |
Multi range slider with gradient | 2,909 Kb |
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!
Name | Username | Size |
Day 11 - Calendar Card | Arnellebalane | 6,984 Kb |
Weather App | OmranAbazid | 2,596 Kb |
Speech bubbles | Something | 1,547 Kb |
My three.js practice | Esambino | 3,203 Kb |
Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
Direction-icon | Alexandremasy | 3,323 Kb |
Comment Jquery | SquishyAndroid | 2,421 Kb |
Eunice A | Ejbronze | 2,203 Kb |
Light Switch | Bartuc | 4,933 Kb |
A Pen by Alex Edwards | Exards | 8,218 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!