165 lines
9.4 KiB
HTML
165 lines
9.4 KiB
HTML
<!doctype html>
|
||
<html lang="">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Material Design Lite</title>
|
||
|
||
<!-- Add to homescreen for Chrome on Android -->
|
||
<meta name="mobile-web-app-capable" content="yes">
|
||
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
|
||
|
||
<!-- Add to homescreen for Safari on iOS -->
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
|
||
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
|
||
|
||
<!-- Tile icon for Win8 (144x144 + tile color) -->
|
||
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
|
||
<meta name="msapplication-TileColor" content="#3372DF">
|
||
|
||
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
|
||
<!--
|
||
<link rel="canonical" href="http://www.example.com/">
|
||
-->
|
||
|
||
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||
<link rel="stylesheet" href="material.min.css">
|
||
<link rel="stylesheet" href="styles.css">
|
||
<style>
|
||
#view-source {
|
||
position: fixed;
|
||
display: block;
|
||
right: 0;
|
||
bottom: 0;
|
||
margin-right: 40px;
|
||
margin-bottom: 40px;
|
||
z-index: 900;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="mdl-base">
|
||
<div class="mdl-layout mdl-js-layout has-drawer is-upgraded">
|
||
<header class="mdl-layout__header mdl-layout__header--scroll mdl-layout__header--transparent is-casting-shadow mdl-color-text--white">
|
||
<!-- Title -->
|
||
<span class="mdl-layout-title">The Newist</span>
|
||
<!-- Add spacer, to align navigation to the right -->
|
||
<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="search">
|
||
<span class="mdl-icon mdl-icon--search"></span>
|
||
</label>
|
||
<div class="mdl-textfield__expandable-holder">
|
||
<input class="mdl-textfield__input" type="text" id="search">
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<main class="mdl-layout__content mdl-grid">
|
||
<div class="mdl-card coffee-pic mdl-cell mdl-cell--8-col">
|
||
<div class="mdl-card--img-container mdl-color-text--grey-50">
|
||
<h3><a href="entry.html">Coffee Pic</a></h3>
|
||
</div>
|
||
<div class="mdl-card--bottom meta mdl-color-text--grey-600">
|
||
<img src="images/logo.svg" class="logo">
|
||
<div>
|
||
<strong>The Newist</strong>
|
||
<span>2 days ago</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
|
||
<div class="mdl-card--img-container mdl-color--primary mdl-color-text--grey-600">
|
||
<img src="images/logo.svg">
|
||
+1,337
|
||
</div>
|
||
<div class="mdl-card--bottom meta mdl-color-text--grey-600">
|
||
<div>
|
||
<strong>The Newist</strong>
|
||
</div>
|
||
<ul class="mdl-menu mdl-js-menu" for="menubtn">
|
||
<button class="mdl-menu__item mdl-js-ripple-effect">New Article</button>
|
||
<button class="mdl-menu__item mdl-js-ripple-effect">Spam Readers</button>
|
||
<button class="mdl-menu__item mdl-js-ripple-effect">Pointless Button</button>
|
||
</ul>
|
||
<button id="menubtn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
|
||
<span class="mdl-icon mdl-icon--menu"></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="mdl-card on-the-road-again mdl-cell mdl-cell--8-col">
|
||
<div class="mdl-card--img-container mdl-color-text--grey-50">
|
||
<h3><a href="entry.html">On the road again</a></h3>
|
||
</div>
|
||
<div class="mdl-color-text--grey-600 mdl-card--lower">
|
||
Ea mollit dolore esse velit mollit in dolore nostrud nulla sint. Ex occaecat dolor consectetur aliqua occaecat proident nisi. Esse do aute sit labore ipsum. Enim sunt anim et do magna occaecat consequat occaecat commodo sunt proident. Officia esse irure cillum laborum nostrud consequat nulla quis nostrud tempor dolore commodo.
|
||
</div>
|
||
<div class="mdl-card--bottom meta mdl-color-text--grey-600">
|
||
<img src="images/logo.svg" class="logo">
|
||
<div>
|
||
<strong>The Newist</strong>
|
||
<span>2 days ago</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mdl-card subscribe mdl-color-text--grey-600 mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
|
||
<div class="mdl-card--header">
|
||
<h3>About</h3>
|
||
</div>
|
||
<div class="mdl-card--lower mdl-color-text--grey-600">
|
||
Elit ullamco pariatur irure quis Lorem consectetur dolor tempor minim ullamco velit. Dolor enim proident aliquip quis sit ullamco cupidatat aliqua ullamco proident ex non culpa. In laboris cillum ipsum adipisicing mollit. Irure ea et non anim labore exercitation consectetur cupidatat ea. Adipisicing eu pariatur commodo quis aute et consequat labore occaecat. Occaecat et cupidatat esse dolore officia incididunt ad in labore proident cupidatat. Ipsum ad qui quis occaecat culpa consequat minim. Ipsum culpa enim elit pariatur incididunt ad anim. Mollit laboris eu officia ipsum sit sit exercitation dolor adipisicing nulla. Ea eu consectetur eu laboris fugiat irure deserunt veniam in esse nulla et.
|
||
</div>
|
||
<div class="mdl-card--bottom meta">
|
||
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"><span class="mdl-icon mdl-icon--share"></span></button>
|
||
<ul class="social">
|
||
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"><span class="mdl-icon mdl-icon--grade"></span></button>
|
||
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"><span class="mdl-icon mdl-icon--invert-colors"></span></button>
|
||
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"><span class="mdl-icon mdl-icon--language"></span></button>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="mdl-card amazing mdl-cell mdl-cell--8-col">
|
||
<div class="mdl-card--header mdl-color--accent mdl-color-text--grey-50">
|
||
<h3 class="quote"><a href="entry.html">I couldn’t take any pictures but this was an amazing thing…</a></h3>
|
||
</div>
|
||
<div class="mdl-card--lower mdl-color-text--grey-600">
|
||
Ea mollit dolore esse velit mollit in dolore nostrud nulla sint. Ex occaecat dolor consectetur aliqua occaecat proident nisi. Esse do aute sit labore ipsum. Enim sunt anim et do magna occaecat consequat occaecat commodo sunt proident. Officia esse irure cillum laborum nostrud consequat nulla quis nostrud tempor dolore commodo.
|
||
</div>
|
||
<div class="mdl-card--bottom meta mdl-color-text--grey-600">
|
||
<img src="images/logo.svg" class="logo">
|
||
<div>
|
||
<strong>The Newist</strong>
|
||
<span>2 days ago</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="empty mdl-cell mdl-cell--4-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
|
||
<div class="mdl-card shopping mdl-cell mdl-cell--8-col">
|
||
<div class="mdl-card--img-container mdl-color-text--grey-50">
|
||
<h3><a href="entry.html">Shopping</a></h3>
|
||
</div>
|
||
<div class="mdl-color-text--grey-600 mdl-card--lower">
|
||
Ea mollit dolore esse velit mollit in dolore nostrud nulla sint. Ex occaecat dolor consectetur aliqua occaecat proident nisi. Esse do aute sit labore ipsum. Enim sunt anim et do magna occaecat consequat occaecat commodo sunt proident. Officia esse irure cillum laborum nostrud consequat nulla quis nostrud tempor dolore commodo.
|
||
</div>
|
||
<div class="mdl-card--bottom meta mdl-color-text--grey-600">
|
||
<img src="images/logo.svg" class="logo">
|
||
<div>
|
||
<strong>The Newist</strong>
|
||
<span>2 days ago</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="empty mdl-cell mdl-cell--4-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
|
||
<nav class="mdl-color-text--grey-50 mdl-cell mdl-cell--8-col">
|
||
More <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"><span class="mdl-icon mdl-icon--arrow-forward"></span></button>
|
||
</nav>
|
||
</main>
|
||
<div class="mdl-layout__obfuscator"></div>
|
||
</div>
|
||
<a href="https://github.com/google/material-design-lite/blob/master/templates/blog/index.html" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect mdl-color--accent"><span class="mdl-icon mdl-icon--pageview"/></a>
|
||
<script src="/material.min.js"></script>
|
||
</body>
|
||
</html>
|