https://materializecss.com/getting-started.html
Material Design
Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google's goal is to develop a system of design that allows for a unified user experience across all their products on any platform.
First of all create a blank HTML document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Begininng HTML</title>
</head>
<body>
</body>
</html>
Dont Forget to make if mobile oriented by adding the following meta tag in head tag
<meta name="viewport" content="width=device-width, initial-scale=1">
Easiest way is to begin with CDN
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Material I cons from Google Fonts. -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Compiled and minified JavaScript paste this at the end of body tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
Final HTML will be
<!DOCTYPE html>
<html lang="en">
<head>
<title>Material Design Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Material I cons from Google Fonts. -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="container">
<h1>My First Material Design Page</h1>
<p>This is some text.</p>
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
|
|
|
|