Material-WebComponents

In this example below you will see how to do a Material-WebComponents with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ineedthekeyboard, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ineedthekeyboard ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Material-WebComponents</title>
  
  
  <link rel='stylesheet prefetch' href='https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body class="mdc-typography mdc-theme--dark">
  <header class="mdc-toolbar mdc-toolbar--fixed demo-toolbar">
    <div class="mdc-toolbar__row">
      <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
        <span class="mdc-toolbar__title">Fake Site</span>
      </section>
      <section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
        <a href="#" class="material-icons mdc-toolbar__icon" aria-label="Download" alt="Download">file_download</a>
        <a href="#" class="material-icons mdc-toolbar__icon" aria-label="Print this page" alt="Print this page">print</a>
        <a href="#" class="material-icons mdc-toolbar__icon" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
      </section>
    </div>
  </header>
  <main class="mdl-card center">
    <h1 class="mdc-typography--display1">Tell us about yourself!</h1>

    <form action="#" id="greeting-form">
      <div>
        <div class="mdc-form-field">
          <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
            <input id="firstname" type="text" class="mdc-text-field__input">
            <label for="firstname" class="mdc-text-field__label">
            First Name
          </label>
            <div class="mdc-text-field__bottom-line"></div>
          </div>
        </div>

        <div class="mdc-form-field">
          <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
            <input id="lastname" type="text" class="mdc-text-field__input">
            <label for="lastname" class="mdc-text-field__label">
            Last Name
          </label>
            <div class="mdc-text-field__bottom-line"></div>
          </div>
        </div>
      </div>

      <button type="submit" class="mdc-button
                   mdc-button--raised
                   mdc-ripple-surface" data-mdc-auto-init="MDCRipple">
      Print Greeting
    </button>
    </form>

    <!-- The p element below is where we'll eventually output our greeting -->
    <p class="mdc-typography--headline" id="greeting"></p>
  </main>
  <div class="mdc-card element-card">
    <section class="mdc-card__media mdc-theme--primary-bg">
      <h1 class="mdc-card__title mdc-card__title--large mdc-theme--text-primary-on-primary">Earth</h1>
      <h2 class="mdc-card__subtitle mdc-theme--text-primary-on-primary">A solid decision.</h2>
    </section>
    <section class="mdc-card__supporting-text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </section>
  </div>
</body>
  <script src='https://unpkg.com/material-components-web@latest/dist/material-components-web.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ineedthekeyboard/material-webcomponents-eyVrvm */
:root {
  --mdc-theme-primary: #0e4ead;  
}
html, body {
  background: black;
}
main {
  margin: 0 auto;
  max-width: 400px;
}
.center {
  text-align:center;
  max-width: 900px
  display:flex;
}

/*Downloaded from https://www.codeseek.co/ineedthekeyboard/material-webcomponents-eyVrvm */
window.mdc.autoInit();

Comments