Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Materialize CSS Demo Template
Materialize-Mobile.html
<!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