Created
November 14, 2019 13:59
-
-
Save TerrenceLP/d4a6e1bdb78f361758c5c7ba33a190fa to your computer and use it in GitHub Desktop.
Materialize CSS Demo Template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <!--Import Google Icon Font--> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| <!-- Compiled and minified CSS --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> | |
| <!--Let browser know website is optimized for mobile--> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <style> | |
| .collection, .collection.with-header .collection-header, .collection .collection-item { | |
| border: none; | |
| border-bottom: none; | |
| } | |
| .collection .collection-item { | |
| padding: 0px 20px 2px 0px; | |
| font-size: 16px; | |
| } | |
| .collection.with-header .collection-item { | |
| padding-left: 0; | |
| display: flex; | |
| } | |
| .collection.with-header .collection-header { | |
| padding: 10px 0 30px; | |
| } | |
| .collection { | |
| margin: .5rem 0 4rem 0; | |
| } | |
| .lead-title { | |
| margin-bottom: 0rem; | |
| margin-top: 0rem; | |
| } | |
| .material-icons { | |
| vertical-align: bottom; | |
| padding-right: 10px; | |
| } | |
| .top-cta { | |
| padding-top: 2%; | |
| } | |
| .offer { | |
| padding-top: 0; | |
| padding-bottom: 2%; | |
| } | |
| .btn-offer { | |
| width: -webkit-fill-available; | |
| } | |
| .hero-side { | |
| background-image: url('https://cloud.google.com/_static/images/cloud/home/icon_hero_gear.png'); | |
| height: 350px; | |
| background-repeat: no-repeat; | |
| background-position: right; | |
| } | |
| .nav-content { | |
| margin: 15px 20px 15px 0; | |
| } | |
| .promos { | |
| padding-top: 3%; | |
| padding-bottom: 3%; | |
| } | |
| .promo-title { | |
| padding-top: 20px; | |
| padding-bottom: 46px; | |
| } | |
| .btn-floating i { | |
| text-align: end; | |
| vertical-align: initial; | |
| padding-right: 8px; | |
| } | |
| .middle-banner { | |
| padding: 50px 20px 20px; | |
| } | |
| .nav-wrapper .input-field input[type=search] { | |
| padding-left: 0.5rem; | |
| width: calc(82% - 1rem); | |
| } | |
| .input-field input[type=search] ~ .material-icons { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| } | |
| .input-field input[type=search]+.label-icon { | |
| left: 0; | |
| } | |
| nav .input-field { | |
| display: flex; | |
| align-items: flex-end; | |
| justify-content: flex-end; | |
| padding-top: 20px; | |
| } | |
| nav .brand-logo { | |
| left:1%; | |
| } | |
| @media only screen and (max-width: 992px) { | |
| nav .brand-logo { | |
| left:22%; | |
| -webkit-transform: translateX(-50%); | |
| transform: translateX(-50%) | |
| } | |
| .container.top-cta { | |
| padding-top: 20%; | |
| } | |
| .offer-promo .col.s12, .promos .col.s12 { | |
| padding-top: 10%; | |
| } | |
| .offer-promo .col.s12 .cards { | |
| padding-top: 2%; | |
| } | |
| .btn-floating i { | |
| text-align: end; | |
| vertical-align: initial; | |
| padding-right: 9px; | |
| } | |
| .promo-title { | |
| padding-top: 0; | |
| padding-bottom: 0; | |
| margin-bottom: 0; | |
| } | |
| } | |
| </style> | |
| <script src="https://kit.fontawesome.com/e7db445ea4.js" crossorigin="anonymous"></script> | |
| </head> | |
| <body> | |
| <div class="navbar-fixed"> | |
| <nav class="nav-extended white"> | |
| <div class="nav-wrapper blue"> | |
| <a href="#!" class="brand-logo">Logo</a> | |
| <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a> | |
| <form class="right hide-on-med-and-down"> | |
| <div class="input-field"> | |
| <input id="search" type="search" onfocusout="clearSearch()" required> | |
| <label class="label-icon" for="search"><i class="material-icons">search</i></label> | |
| <i class="material-icons">close</i> | |
| </div> | |
| </form> | |
| <ul class="right hide-on-med-and-down"> | |
| <li><a href="sass.html">Sass</a></li> | |
| <li><a href="badges.html">Components</a></li> | |
| <li><a href="collapsible.html">Javascript</a></li> | |
| <li><a href="mobile.html">Mobile</a></li> | |
| <li><a href="mobile.html"><i class="material-icons">person</i></a></li> | |
| </ul> | |
| <ul class="right hide-on-large-only"> | |
| <li><a href="sass.html">Sass</a></li> | |
| <li><a href="mobile.html"><i class="material-icons">person</i></a></li> | |
| <li><i class="material-icons">search</i> | |
| </ul> | |
| </div> | |
| <div class="nav-content right hide-on-large-only"> | |
| <a class="waves-effect waves-light btn white blue-text btn-chat">Contact Sales</a> | |
| </div> | |
| </nav> | |
| </div> | |
| <!-- Mobile Slide Nav goes here --> | |
| <ul class="sidenav" id="mobile-demo"> | |
| <li><a href="sass.html">Sass</a></li> | |
| <li><a href="badges.html">Components</a></li> | |
| <li><a href="collapsible.html">Javascript</a></li> | |
| <li><a href="mobile.html">Mobile</a></li> | |
| </ul> | |
| <div class="container-fluid"> | |
| <!-- Page Content goes here --> | |
| <div class="container top-cta"> | |
| <div class="row"> | |
| <div class="col l6 s12"> | |
| <ul class="collection with-header"> | |
| <li class="collection-header"> | |
| <h3 class="grey-text lead-title">Build What’s Next</h3> | |
| <h3 class="blue-text lead-title">Better Software. Faster.</h3> | |
| </li> | |
| <li class="collection-item"><i class="material-icons blue-text">check</i> | |
| Use core infrastructure, data analytics and machine learning.<a href="#!"></a></li> | |
| <li class="collection-item"><i class="material-icons blue-text">check</i> | |
| Secure and fully featured for all enterprises.<a href="#!"></a></li> | |
| <li class="collection-item"><i class="material-icons blue-text">check</i> | |
| Committed to open source and industry leading price-performance.<a href="#!"></a></li> | |
| </ul> | |
| <div class="row offer-buttons"> | |
| <div class="col s12 l6"> | |
| <a onclick="M.toast({html: 'I am a toast alert message'})" class="waves-effect waves-light btn-large grey btn-offer"><i class="material-icons left">book</i>Read More</a> | |
| </div> | |
| <div class="col s12 l6"> | |
| <a onclick="M.toast({html: 'I am more buttery toast', classes: 'rounded'})" class="waves-effect waves-light btn-large blue btn-offer"><i class="material-icons left">cloud</i>Free Trial</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col l6 hero-side hide-on-med-and-down"></div> | |
| </div> | |
| </div> | |
| <div class="container offer"> | |
| <div class="row offer-title"> | |
| <div class="col s12 center"> | |
| <h3 class="grey-text promo-title">Why the New Cloud Platform?</h3> | |
| </div> | |
| </div> | |
| <div class="row offer-promo center"> | |
| <div class="col l4 s12"> | |
| <!-- Promo Content 1 goes here --> | |
| <i class="material-icons large blue-text">flash_on</i> | |
| <p class="promo-caption">Future-Proof Infrastructure</p> | |
| <p class="light center">Future-Proof Infrastructure Secure, global, high-performance, cost-effective and constantly improving.</p> | |
| <div class="col s12 cards"> | |
| <div class="card-panel grey lighten-5 z-depth-1"> | |
| <div class="row valign-wrapper"> | |
| <div class="col s4"> | |
| <img src="https://materializecss.com/images/yuna.jpg" alt="" class="circle responsive-img"> <!-- notice the "circle" class --> | |
| </div> | |
| <div class="col s8"> | |
| <span class="black-text"> | |
| This is a square image. Add the "circle" class to it to make it appear circular. | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col l4 s12"> | |
| <!-- Promo Content 2 goes here --> | |
| <i class="material-icons large blue-text">adb</i> | |
| <p class="promo-caption">Seriously Powerful Data & Analytics</p> | |
| <p class="light center">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components.</p> | |
| <div class="col s12 cards"> | |
| <div class="card-panel grey lighten-5 z-depth-1"> | |
| <div class="row valign-wrapper"> | |
| <div class="col s4"> | |
| <img src="https://materializecss.com/images/yuna.jpg" alt="" class="circle responsive-img"> <!-- notice the "circle" class --> | |
| </div> | |
| <div class="col s8"> | |
| <span class="black-text"> | |
| This is a square image. Add the "circle" class to it to make it appear circular. | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col l4 s12"> | |
| <!-- Promo Content 3 goes here --> | |
| <i class="material-icons large blue-text">ac_unit</i> | |
| <p class="promo-caption">Serverless, Just Code</p> | |
| <p class="light center">Grow from prototype to production to planet-scale, without having to think about capacity, reliability or performance.</p> | |
| <div class="col s12 cards"> | |
| <div class="card-panel grey lighten-5 z-depth-1"> | |
| <div class="row valign-wrapper"> | |
| <div class="col s4"> | |
| <img src="https://materializecss.com/images/yuna.jpg" alt="" class="circle responsive-img"> <!-- notice the "circle" class --> | |
| </div> | |
| <div class="col s8"> | |
| <span class="black-text"> | |
| This is a square image. Add the "circle" class to it to make it appear circular. | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="divider"></div> | |
| <div class="container-fluid blue darken-2 center white-text promos"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col l4 s12"> | |
| <!-- Promo Content 3 goes here --> | |
| <i class="fab fa-amazon fa-5x"></i> | |
| <p class="promo-caption">"The ease, integration and scalability that Google offers with Cloud Platform allow us to offer the best online grocery shopping around."</p> | |
| </div> | |
| <div class="col l4 s12"> | |
| <!-- Promo Content 3 goes here --> | |
| <i class="fab fa-google fa-5x"></i> | |
| <p class="promo-caption">"The ease, integration and scalability that Google offers with Cloud Platform allow us to offer the best online grocery shopping around."</p> | |
| </div> | |
| <div class="col l4 s12"> | |
| <!-- Promo Content 3 goes here --> | |
| <i class="fab fa-twitter fa-5x"></i> | |
| <p class="promo-caption">"The ease, integration and scalability that Google offers with Cloud Platform allow us to offer the best online grocery shopping around."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container promos"> | |
| <div class="row"> | |
| <div class="col s12 l4"> | |
| <div class="card"> | |
| <div class="card-image"> | |
| <img src="https://materializecss.com/images/sample-1.jpg"> | |
| <span class="card-title">Card Title</span> | |
| <a href="#modal1" class="btn-floating halfway-fab waves-effect waves-light blue modal-trigger"><i class="material-icons">add</i></a> | |
| </div> | |
| <div class="card-content"> | |
| <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col s12 l4"> | |
| <div class="card"> | |
| <div class="card-image"> | |
| <img src="https://materializecss.com/images/sample-1.jpg"> | |
| <span class="card-title">Card Title</span> | |
| <a href="#modal1" class="btn-floating halfway-fab waves-effect waves-light blue modal-trigger"><i class="material-icons">add</i></a> | |
| </div> | |
| <div class="card-content"> | |
| <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col s12 l4"> | |
| <div class="card"> | |
| <div class="card-image"> | |
| <img src="https://materializecss.com/images/sample-1.jpg"> | |
| <span class="card-title">Card Title</span> | |
| <a href="#modal1" class="btn-floating halfway-fab waves-effect waves-light blue modal-trigger"><i class="material-icons">add</i></a> | |
| </div> | |
| <div class="card-content"> | |
| <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Modal Structure --> | |
| <div id="modal1" class="modal"> | |
| <div class="modal-content"> | |
| <h4>Modal Header</h4> | |
| <p>A bunch of text</p> | |
| </div> | |
| <div class="modal-footer"> | |
| <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="page-footer blue"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col l6 s12"> | |
| <h5 class="white-text">Footer Content</h5> | |
| <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p> | |
| </div> | |
| <div class="col l4 offset-l2 s12"> | |
| <h5 class="white-text">Links</h5> | |
| <ul> | |
| <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li> | |
| <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li> | |
| <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li> | |
| <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer-copyright"> | |
| <div class="container"> | |
| © 2020 Copyright Text | |
| <a class="grey-text text-lighten-4 right" href="#!">More Links</a> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Compiled and minified JavaScript --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| let elems = document.querySelectorAll('.sidenav') | |
| let instances = M.Sidenav.init(elems) | |
| }) | |
| document.addEventListener('DOMContentLoaded', function() { | |
| var elems = document.querySelectorAll('.modal'); | |
| var instances = M.Modal.init(elems); | |
| }); | |
| clearSearch = () => { | |
| document.getElementById("search").value = '' | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment